float / overflow:hidden/ clear

float란 ?

float 띄운다는 뜻으로 웹페이지에서 float를 준 영역을 띄워서 left 혹은 right로 자리 잡게 한다.
띄운다는 것 자체가 영역을 인식하기 힘들기 때문에 따로 영역이나 크기를 선언 해주고, 플로트가 끝남을 알리는 것을 써서 다른 영역이 float가 적용 되지 않도록 해줘야 한다.

float 속성

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다.
또, float를 쓰면 자동으로 inline-block 화 된다.

이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다.

다음 예제는 이미지와 글자를 함께 출력하는 예제이다.

예제

<style>

    img { float: left; margin-right: 20px; }

</style>

overflow:hidden

overflow 넘치는 영역을 hidden 숨겨 버린다는 뜻이다.
이 속성을 float를 쓴 부모 요소에 적용을 시키고 다음에 오는 영역이
침범하거나 올라오지 못하도록 자리를 잡게 해주는 역할을 한다.

Clear

float 속성이 적용 된 후 나타나는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정 해주는 역할을 한다.

float를 준 앞::before 뒤::after 요소에 clear: both 속성을 사용한다.