[CSS] float / clear

float

float 속성은 요소가 문서의 일반적인 흐름(html에서 먼저 작성된 것부터 나타남)에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.

속성값 (keyword)

none : 기본값, 원래 상태
left : 자신을 포함하고 있는 박스의 왼편에 떠 있음
right : 자신을 포함하고 있는 박스의 오른편에 떠 있음
=> 문서의 흐름에서 제외, 자신의 공간 차지
=> 나머지 요소들은 float이 차지하는 공간을 제외한 나머지 공간에서 문서의 흐름을 따른다.

clear

clear 속성은 float 요소 이후에 표시되는 요소가 float를 헤제(clear)하여 float 요소의 아래로 내려갈 수 있게 한다.

속성값 (keyword)

none : 기본값, 아래로 이동되지 않음
left : float이 left인 요소의 아래로 이동
right : float이 right인 요소의 아래로 이동
both : float이 left및 right인 요소의 아래로 이동