[CSS] float 속성

float는 요소를 왼쪽이나 오른쪽에 이동시킬 때 사용한다.

 

float는 주로 레이아웃을 구성할 때 가로 정렬을 위해 사용된다.

See the Pen float 1 by hyeon (@longflash) on CodePen.

div는 블록구조이므로, div 태그를 두 번 입력하면 1번과 2번 박스처럼 아래로 쌓인다. 3번과 4번을 보면 왼쪽 정렬한 것을 볼 수 있는데, 이것이 float: left의 힘이다. right값을 주게 되면, 오른쪽으로 정렬한다. 이런 기능을 이용하여, 레이아웃을 짤 수 있다.

 

float 속성은 간편하지만, 문제는 float 속성 이후에 나타나는 요소들의 위치 설정이 곤란해진다는 데 있다. 예를 보자.

 

See the Pen float 2 by hyeon (@longflash) on CodePen.

밑에 내려와야할 Footer(분홍색)의 위치가 엉망으로 되어있는 것을 볼 수 있다. 이 Footer엔 더 이상 float 속성에 영향을 받지 않게 하겠다는 의미를 가진 clear:both;를 넣어주면, float 바로 아래에 Footer가 위치할 것이다.