HTML/CSS float와 overflow hidden 5분만에 이해하기

 overflow hidden은 일정 영역을 벗어나는 부분을 보이지 않게 하는 스타일 속성이다. 하지만 레이아웃을 구성할 때에 float 속성과 자주 함께 사용하기도 한다. overflow hidden과 flow를 같이 사용하여 레이아웃을 구성하는 방법을 One True Layout 방식이라고 표현한다.

 

 

 

 다음과 같은 HTML 코드를 입력하여 간단한 레이아웃을 구성하여

 

 

 CSS로 스타일을 적용하여 float: left 속성을 주었다.

 

 

 

다음처럼 Footer 요소가 제대로 자리를 잡지 못한 레이아웃이 구성된다. 이유는 Aside와 Section 요소가 Footer 요소 위에 float 속성으로 부유하게 되므로 일어나는 현상인데, overflow hidden 속성으로 이를 바로잡을 수가 있다.

 

 

 

  원래의 float의 용도는 이미지를 글자 위에 띄우기 위해서 사용했다고 하는데, 

 

 

 

이미지에 float 속성을 적용하면 다음처럼 글자 위에 이미지가 부유하게 된다. 앞의 레이아웃도 똑같은 원리로 Aside와 Section 요소가 부유하게 되어서 일어나는 현상이다.

 

 

 

 

 이는 aside와 section의 상위(부모) 속성인 wrap에 overflow hidden을 적용하면 해결이 된다.

 

 

 

 overflow hidden 속성으로 빨간색 박스부분의 오버플로우 부분이 히든 됨으로써 Footer 요소가 자연히 아래로 내려가게 되었다.

 

 

 

 overflow hidden을 적용하지 않고 footer의 width를 설정하여도 넘쳐나는 가로넓이로 인하여 footer가 자연히 아래로 위치한다.

 

 

 

 레이아웃을 구성할 때에 '하위요소에 float 속성을 적용하면 상위요소에는 overflow hidden을 적용한다' 이를 하나의 공식처럼 생각하면 편하겠다.