수라의 티스토리

예전에 float을 제거하는 방법이라는 글에서 overflow 속성을 이용하는 float 해제 방법을 다뤘습니다. 그 내용을 아래에 일부 인용하겠습니다.

“만약 width만 지정한 상태에서 overflow: hidden;을 적용하면 박스가 내용물의 크기만큼 아래로 늘어나니까요. 이 때 박스 안에 있는 float된 요소의 높이까지도 같이 계산됩니다. 결국 박스가 float된 요소를 포함할 만큼 커지기 때문에 float을 제거하는 효과가 나타나게 됩니다.”

글을 쓰던 당시에 overflow가 float된 요소를 포함하도록 박스 크기를 늘리는 명확한 이유는 몰랐습니다. CSS 2.1을 열심히 찾아봤는데 overflow 속성 설명에는 관련 내용이 전혀 없었거든요. 그래서 경험적인 추측일 뿐이었습니다.

그런데 어제 마진 병합에 관한 글을 쓰면서 그 원리가 CSS 2.1에 정확하게 명시되어 있다는 사실을 알게 되었습니다.

그 내용은 시각적인 서식 모델의 세부 사항(visual formatting model details)을 다루는 10장의 6.6, 6.7절입니다.

마진 병합을 다루면서 블록 레벨 요소의 height 결정 방식을 찾아봤는데 overflow가 visible일 때에만 적용되는 내용이었습니다. 그래서 visible이 아닌 경우를 찾아봤는데 6.6절에 있더군요.

6.6절은 일반적이지 않은 상황에서의 height 결정 방식을 다룹니다. 핵심적인 내용은 아래와 같습니다.

“일반적인 문서 흐름(normal flow)에서 블록 레벨 요소의 overflow 값이 visible이 아니고 height가 auto면 그 자손 요소에 따라서 6.7절에 명시된대로 높이가 결정된다.”

6.7절에서 실제 높이 결정 방식을 다루는데 float된 자식 요소과 관련된 부분은 다음과 같습니다.

“만약 요소가 float된 자손 요소를 갖고 이 자손 요소의 하단 마진 경계(bottom margin-edge)가 요소 박스 아래에 있으면 요소 박스의 높이는 자손 요소의 하단 마진 경계를 포함하도록 늘어난다.”

따라서 overflow를 이용한 float 해제는 CSS 2.1에 정의된 정확한 동작 방식입니다. 그동안 참 많이 궁금했었는데 결국은 궁금증이 풀렸네요. ^^