CSS - Float, Clear

Float

float는 요소들을 배치할때 유용하게 쓰이는 속성이다.
사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용한다. left, right, none(기본값), inherit

left
박스를 왼쪽으로 이동시킨다. 뒤에오는 내용들은 박스의 오른쪽 상단부터 시작한다.
right
박스를 오른쪽으로 이동시킨다. 뒤에오는 내용들은 박스의 왼쪽 상단부터 시작한다.

float는 block, inline 요소를 좌우 정렬하는데 부모요소를 기준으로 한다. float가 적용되면 자신의 원래 자리를 다음에 오는 불록요소에게 내어준다. float 요소는 float 요소끼리만 정렬하며 일반요소와는 정렬하지 않는다.

Clear

Clear는 float를 제어하는데 쓰인다. float 속성을 해제하는 것이다.
적용 대상은 block-level 요소들이다.

.box{
    clear:both;
}

clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 준다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다.

따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 한다.

요즘에는 거의 쓰지않는다...