요소의 정렬

float

• 해당 요소를 다음 요소 위에 떠있게 한다. (가리지는 않음)

• position이 absolute와 병행해서 사용하면 안 됨.

width

• float 적용 시 inline처럼 content의 크기만큼 width가 변경됨.

• 다음 block요소가 그 크기만큼 가로가 작아지는게 아님. (여전히 width 100%)

관련 문제

• float가 선언된 요소와 그렇지 않은 요소간 margin이 사라짐

  • 원인 : 후자 요소가 float가 아니기 때문에 박스 모델 상에서 문제가 생김

  • 해결방법 : 후자 요소에 overflow : hidden을 선언

• float 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않음

  • 원인 : float 요소의 높이를 부모가 알지 못함.

  • 해결방법

    • clearfix::after 가상 요소 추가 (권장)

      .clearfix::after {
      	content : '';
          display : block;
          clear : both;
      }

      • 부모 요소에 overflow : hidden 선언