[css] float

Float

float란?

• 레이아웃을 구성할 때 블록 레벨 요소로 가로로 정렬하기 위해 사용되는 기법이다.

일반적으로 기사에 이미지와 글이 섞여 배치되는 형태를 떠올리면 쉽다. float의 몇 가지 프로퍼티를 작성하여서 사용하면 된다.

프로퍼티는 아래와 같다.

프로퍼티	설명
none	요소를 떠 있게 하지 않는다. (기본값)
left	요소를 왼쪽으로 이동시킨다.
right	요소를 오른쪽으로 이동시킨다.
clear	float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정한다.

clear

float를 적용하면 그 이후에 오는 다른 요소들까지 float 속성이 적용되게 된다. 이 때, float에 영향을 받지 않도록 float 속성을 해제하기 위해 사용하는 것이 clear이다.

clear의 프로퍼티는 아래와 같다.

프로퍼티	설명
none	clear 속성을 설정하지 않은 것과 같다. (기본값)
left	왼쪽으로 붙는 float 정렬을 취소 한다.
right	오른쪽으로 붙는 float 정렬을 취소 한다.
both	왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다.

---

참고