기발자의 개발 노트 
float 속성은 레이아웃 작업을 도와주는 편리한 도구지만 특징을 제대로 이해하지 못하면 오히려 불편한 도구이다. float 속성은 부모의 높이에 영향을 주지 않으며, 부모 자식 간의 마진 병합 현상도 일어나지 않는다. 즉, 3차원 특징을 지닌 position 속성값의 조건 일부가 float 속성에도 적용된다(top, right, bottom, left 사용 제외).
float 속성을 적용한 영역이 고정값(px)을 갖고 있다면 가변값(%)을 가진 부모 요소 안에서는 결코 사용하지 말아야 한다. 이 부분은 Day 12에서 인트로 공간을 작업할 때 간단히 다루었지만 좀 더 구체적으로 알아보자.
우리는 Day 09에서 float와 clear 속성을 사용하여 전통적인 웹 사이트 레이아웃 구조를 간단하게 만들어 보았다. 파란색, 주황색, 빨간색 영역을 x축으로 나란히 정렬시킬 때 float 속성을 사용했던 걸 떠올려 보자.
앞의 그림에서 세 개의 영역은 현재 <body> 태그를 부모로 가진다. <body> 태그에는 margin과 padding 속성을 제외한 공간의 크기를 결정하는 어떤 CSS 속성도 입력하지 않았다. 눈으로 봤을 때는 문제가 없어 보이는 레이아웃이지만 브라우저 창의 너비를 좁히면 레이아웃이 틀어지는 문제가 발생한다.
이러한 문제가 발생하는 이유는 인트로 공간에서 좌우에 구름을 배치할 때 이미 살펴보았다. <body> 태그의 너비를 고정값(px)으로 지정하지 않았다면 <body> 태그의 너비는 브라우저 창의 너비와 같다. 정리하면 부모 요소의 너비가 가변값(%)을 가지고 float 속성을 적용한 자식 요소가 고정값(px)을 갖는다면 브라우저 창의 너비를 줄였을 때 레이아웃이 틀어지는 문제가 발생한다.
이러한 문제를 해결하려면 부모 요소가 고정값을 갖고 있거나 자식 요소가 가변값을 갖고 있으면 된다. 우리는 이미 science 공간에서 고정값을 가진 부모 요소 안에 float 속성을 적용한 서랍장 세 개를 배치하면서 이러한 특징을 살펴보았다.
웹 사이트 레이아웃 작업 방식을 완벽하게 이해하고 싶다면 position 속성과 함께 float 속성의 주요 특징도 정복하기 바란다.