CSS 이야기: overflow 속성의 float 해제 효과

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

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

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

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

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

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

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

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

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

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

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

댓글 15개가 달렸습니다. 태그: , , ,

  1. 이태임 | 2008-09-12 09:44

    잘 읽었습니다.하지만…이해가 안되는건지 아님 제가 지금 피곤해서 글이 눈에 안들어오는건지…아무튼 이해가 안되네요

  2. wystan | 2008-09-12 15:15

    개인적으로 놀라운 발견이라서 급히 쓰느라 설명이 부족했네요~

    overflow: hiddenfloat 해제 효과를 낸다는 것은 많이 알려져 있습니다. 그런데 CSS 2.1에서 그 효과가 정확히 어디에 설명되어 있는지는 제가 지금껏 모르고 있었거든요.

    이 글은 기존에 경험적으로 알고 있던 동작 방식이 실제로 CSS 2.1에 명시되어 있다는 사실에만 초점을 맞췄는데 조만간 자세한 동작 방식에 대한 설명을 추가해서 업데이트 할 생각입니다.

  3. 밥먹자 | 2008-09-20 14:25

    덕분에 도움이 되었습니다. 적용하니까 잘 되네요. 감사합니다.
    근데 저도 약간 이해가 안 갑니다.. 이해가 가는 것 같기도 하고 아닌 것 같기도 하고…켁.. ^^;;

    다른 글들 읽어보니까 설명이 너무 잘 되있어서 머리속에 정리가 팍팍!! 되네요.
    종종 들러야겠어요. 고맙습니다~ ^___^

  4. wystan | 2008-09-20 22:00

    도움이 되셨다니 기쁘네요. ^^
    자주 업데이트는 못하지만 꾸준히 운영하고 있으니 종종은 아니더라도 가끔씩 들러주세요~

  5. 나무 | 2008-09-23 10:27

    종종들리는데 알찬 내용이 업데이트 되어있네요..
    설렁설렁 넘어갔던 부분에 대해 진지하게 생각하게 되었습니다.
    위스터님 덕분에 공부 잘하고 갑니다. ^^

  6. wystan | 2008-09-24 23:50

    빨리 테스트 소스 만들고 다음 글도 써야 하는데 요즘 정신이 없어서 계속 미루고 있네요. ^^;
    제대로 업데이트도 못하고 있는데 그래도 이렇게 좋게 봐주셔서 고맙습니다. ^^

  7. 강짱 | 2008-10-29 13:34

    좋은 정보 보고 가요~~
    float해제법과 overflow해제법에 차이점을 조금이나마 이해 할수 있겠됫어요
    감사해요~

  8. wystan | 2008-11-09 14:34

    찾아주셔서 고맙습니다. ^^

  9. 엽님 | 2008-11-17 15:35

    오랜만에 들어왔습니다.ㅋ
    좋은글 항상 감사하구요 ㅋㅋ

    왜케 바쁘신거에요!ㅜ.ㅜ;

  10. 어거 | 2008-11-27 09:24

    좋은 정보 감사드립니다.
    항상 쓰면서도 원리나 근거도 모르고 사용했었는데
    좋은글 감사드려요~ 앞으로도 많이 부탁드려요

  11. wystan | 2009-01-13 00:59

    고맙습니다. ^^

    CSS 권고안을 쉽게 설명하는 그런 글을 쓰고 싶은데, 아직 정확하게 이해하지 못하는 부분도 많고 그렇습니다.
    앞으로는 작은 부분부터 차근차근 정리해보려고요~

  12. wystan | 2009-01-13 01:01

    그리고 엽님~

    이제야 댓글을 남기네요.
    이제 조금 여유가 생기기는 했는데… 그래도 여전히 할 일이 많네요. ^^;

    나중에 다들 모여서 술 한잔 해요~~

  13. solmate | 2010-01-05 14:09

    잘 보고 갑니다. 감사합니다.^^

  14. suny | 2010-02-04 16:56

    아.. 천천히 잘 읽어보니까 이해가 좀 가네요
    그동안 잘 몰라서 overflow:hidden;은 일종의 핵인줄 알고 쓰기를 좀 꺼려했었는데..^^;
    제가 잘못 알고 있었군요 ㅎㅎ
    아무튼, 자세한 설명 정말 감사합니다~ ^^

  15. 아기여우 | 2010-10-14 17:22

    전 아직 많이 부족한가바요.. 글이 하나도 이해가 안가요~..ㅠㅠ
    float는 몇번 써봐서 조금 알꺼 같긴 한데 float를 제거한다는게 무슨 의미인지..ㅠㅠ;;
    으엉..ㅠㅠ 그래도 잘 보구가요..ㅠㅠ

댓글이 닫혔습니다.