CSS | float

katej927·2020년 12월 17일
0

HTML/CSS

목록 보기
5/8
post-thumbnail

float을 사용할 때

  • 주 사용

    • 이미지 주변에 텍스트를 감싸기
    • 페이지 전체의 레이아웃을 잡을 때
    • 과거에 레이아웃 잡는데 사용함.
  • 최근 레이아웃 잡는데 사용하는 것

    flex > float

float값의 종류

  • none : 요소를 띄우지 않습니다. (default)
  • left : 요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄웁니다.
  • right : 요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄웁니다.
  • Inherit : 요소 자신을 포함하고 있는 부모의 float 속성을 가져옵니다.
  • float는 좌측(또는 우측)으로 붙기 때문에, {position: absolute} 와 같이 사용될 수 없다.

float 문제와 해결

문제 1 : 부모가 높이를 인지 불가 → 부모를 벗어남

해결 1

1. 바깥
마지막에 아무 태그나 넣고 clear 속성 적용

  • clear속성

    float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티

  • 부담 : HTML코드를 더 입력해야 함.

  • 특징

    clear: left; 하면 왼쪽에 있던 겹치던 요소가 안 겹쳐짐.

2. 바깥 div에 overflow: hidden; 줌.

  • 넘친 콘텐츠를 감출 수 있다.

3. 바깥 div에 float 주기

→ 자식의 float 높이를 인지하여 그만큼 높이를 차지

→ 문제 : float이 되어버려 block 요소의 성질이 없어지게 됨.

→ 문제의 해결: width: 100%; 추가

문제 2 : 이미지가 커서 부모를 벗어난 경우

float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제를 해결하고 싶을 때

해결 2 (clearfix 핵)

         .clearfix {
           overflow: auto;
           zoom: 1;      # IE6를 지원하고 싶다면 추가
         }

→ 부모 안에 이미지가 모두 들어옴

profile
°˖✧ Dreams come true ✧˖°

0개의 댓글