그림 6-65 실행결과

코드를 실행하면 웹 브라우저에 그림과 같이 표시됩니다. 이 상태에서 빨간색 요소와 파란색 요소를 float 속성으로 나란히 배치해 보겠습니다.

.box{
  width:100px;
  height:100px;
  float:left;
}

그림 6-66 실행결과

예상과 달리 부모 요소가 자식인 빨간색과 파란색 요소의 공간을 제대로 인식하지 못하고 있습니다. 즉, float 속성을 적용하면 해당 자식 요소를 부모 요소가 제대로 인식하지 못합니다. 바로 이런 현상 때문에 웹 페이지의 레이아웃을 구성할 때 예기치 못한 문제가 발생할 수 있습니다. 이를 해결하는 방법은 두 가지입니다. clear 속성을 사용하거나 overflow 속성을 사용하는 겁니다.