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를 지원하고 싶다면 추가
         }

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