개요

CSS에서 float란 요소를 정렬할 때 사용하는 속성으로 해당 요소를 다음 요소 위에 떠 있게 하기 위해 사용한다. 처음에는 이미지 요소를 문서와 함께 나타내기 위해 사용하였지만, 레이아웃을 구성하는 데에도 사용한다.

float Property Values

Value	Description
none	기본값으로, 엘리먼트가 뜨지 않는다.
inherit	부모요소에서 상속받는다.
left	해당 요소를 왼쪽으로 이동시킨다.
right	해당 요소를 오른쪽으로 이동시킨다.

예시

주의사항

float을 사용할 때 position:absolute를 사용하면 안된다. float 속성은 relative한 위치 지정을 하기 때문에 해당 속성이 적용되지 않기 때문이다.
또한, float속성을 사용하면 해당 요소가 일반적인 흐름에서 벗어나게 되어(붕 뜨게 되어) 부모 요소가 해당 요소를 인식하지 못하게 되는 문제가 발생한다. 이는 부모 요소에 overflow:hidden 속성을 추가하여 해결할 수 있다.

clear 속성을 활용한 float의 취소

clear 속성은 float 속성이 적용된 요소 다음에 위치하는 요소들이 float가 적용된 요소와 겹치게 되는 현상을 방지하기 위해 사용된다. clear 속성을 사용하면 float 속성이 적용된 요소 다음에 오는 요소들이 더이상 float 속성에 영향을 받지 않게 되고 float 속성이 적용된 요소 아래에 위치하게 된다.

clear Properties Value

Value	Description
none	기본값으로, 요소가 어느 쪽으로든 뜰 수 있다.
left	float:left를 취소시킨다. 요소가 오른쪽에 부유한 요소 다음에 위치하도록 한다.
right	float:right를 취소시킨다. 요소가 왼쪽에 부유한 요소 다음에 위치하도록 한다.
both	float:left, right 둘 다 취소시킨다. 요소가 왼쪽과 오른쪽에 부유한 요소 다음에 위치하도록 한다.

예시

float 속성을 활용한 레이아웃 구성

float 속성을 활용하면 자신이 원하는 레이아웃을 구성할 수 있다. 하지만 float 속성은 다른 요소들과 겹치거나, 높이를 자동으로 계산하지 못하는 문제점이 있어 현재는 flex 속성이나 CSS grid와 같은 레이아웃 기술을 활용하여 더욱 효율적인 레이아웃을 구성하고 있다.