float는 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 속성이다.
float 속성에 left 또는 right 값을 주면 매우 독특한 형태와 기능을 갖게 된다. 해당 요소는 붕 뜬 상태가 되어서, 나란히 배치된 요소들 가운데 자리를 차지하지 않게 된다. 때문에 다음에 오는 블록 요소들이 자리에서 밀려나지 않고, 그 아래로 들어가 버리게 되는 것이다. 그러면서 특이하게도 텍스트 등의 인라인 요소들은 float 요소들에 밀려나게 된다. (다른 float된 요소들도 마찬가지이다.)
또한 해당 요소가 인라인일 경우 블록과 같은 속성을 갖게 되어 CSS로 높이와 너비 등을 적용할 수 있게 된다. 물론 float 상태가 되므로 자리는 같은 float끼리만 차지하게 된다.
clear 속성을 이전의 float 요소들과 같이 left, right, both 등으로 적용하면 그들 밑으로 들어가지 않고 아래로 빠져나오게 된다. 이전 형제들에 적용된 float 효과를 해제하는 데 clear 속성을 사용한다고 생각하면 좋다.
float 요소는 공간을 차지하지 않으므로, 부모 요소는 이들을 인지하지 않아 높이 계산에 적용하지 않는다. 이 문제를 해결하기 위해 다음의 방법들을 사용한다.