[CSS3] Position : Float의 부모 height가 적용이 안되는 현상 해결법

css3에서 자식요소에 float를 적용하면 부모의 height가 0으로 되어버리는 경우가 있습니다. 오늘은 이 현상을 해결하는 법을 알아보도록 하겠습니다.

위 코드를 보시면 nav의 부모태그인 header의 height가 0가 되는 현상을 확인할 수 있습니다.

이유는 float 속성은 쉽게 말해 오른쪽이나 왼쪽으로 붕~띄운다는 뜻입니다. 한마디로 부모를 float로 설정하지 않는 이상, 거기에 적용받지 않고 독립적으로 위로 떠있는 상태죠.

이 상태를 부모요소까지 적용을 시키려면 다른 방법이 필요합니다.

방법 1 (가상 선택자 :after로 clear 하는 방법)

가장 탁월하다고 생각하는 방법이라 첫번째로 소개합니다. 우선 "가상 선택자"라는 개념을 이해하셔야 하기 때문에 약간 이해가 필요한데요. 가상선택자를 이용해 처리하면 의미없는 빈 엘리먼트를 사용하지 않으면서도 가상 엘리먼트를 이용해 깔끔하게 float가 clear가 됩니다. 

이 방법은 크로스 브라우징에 대해 걱정할 필요가 없습니다. IE8에 호환이 되는 방법입니다.

하지만 Internet Explorer 7이하는 :before, :after 가상 엘리먼트 선택자를 지원하지 않기 때문에 다음과 같은 Hack이 필요합니다. 

header {*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */

방법 2 (overflow: auto / overflow: hidden)

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow:auto 또는 overflow: hidden 속성을 부여하는 방법이 있습니다. overflow: auto 속성은 자식의 너비가 가변적이고 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 일반적으로 권장되는 방식은 아닙니다. overflow: hidden 속성은 가로 스크롤바를 유발하지는 않지만 자신의 너비가 넘치는 경우 넘치는 부분이 잘리기 때문에 이 역시 완전하게 대응할 수 있는 방식은 아닙니다.

방법 3 (float에 float으로 대응하는 방법)

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 float 속성을 부여하는 방법이 있습니다. 부모에게 float 속성을 부여하게 되면 부모엘리먼트는 자식 엘리먼트의 높이를 반영합니다. 하지만 부모 엘리먼트의 너비는 float된 두 자식의 너비를 담을만큼만 작게 줄어든다는 사실에 주목해 주세요. 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우에 적용하기 어려운 단점이 있습니다. 또한 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상 엘리먼트에게 각각 전달하기 위하여 조상 엘리먼트들을 모두 float 시켜야 하므로 일반적으로 사용하는것을 권장하지 않습니다.