그림 9-9 파란색 박스에 float:left를 적용하여 왼쪽 끝에 배치

float 속성을 사용하면 3차원 특징 중 일부를 갖게 되므로 레이어가 달라집니다. 즉, 파란색 박스는 부모 자식 간에 발생하는 마진 병합 현상이 일어나지 않고 자식의 높이가 부모의 높이에 영향을 주지 못합니다.

파란색 박스 옆에 주황색 박스를 배치하려면 왼쪽 끝부터 순서대로 배치하겠다는 의미로 <section> 태그에도 똑같이 float: left;을 적용합니다. <aside id="left">와 <section> 태그에 float: left;을 적용하면 ‘왼쪽부터 차곡차곡 배치하겠다’는 뜻이 됩니다.

예제 소스 Exercise/9장/2_float/style04.css

section {
    float: left;
    width: 400px;
    height: 200px;
    background-color: orange;
}