TIL4 - CSS float & clear

1. CSS float

float는 '흐르다'라는 뜻을 가지고 있으며, 요소를 부유하게 하여 정렬하거나 배치할 때 주로 사용하는 속성이다.

사용법

.img {
  float: left;
}

float을 적용하지 않았을 때

레이아웃의 일반적인 흐름은 위와 같이 위에서 아래 방향으로 차례대로 나열된다. 이 상태에서 float 속성을 적용하면 어떻게 될까?

float의 속성값

1. none

float의 기본값이다. 요소를 띄우지 않는다.

2. left

요소를 왼쪽으로 배치한다.

3. right

요소를 오른쪽으로 배치한다.

플로팅된 요소는 자동적으로 block 박스가 된다. 즉, 본인 영역만큼만 인지하는 inline이라도 block의 기능을 가지고 있는 inline-block 박스처럼 렌더링되기 때문에 굳이 display: inline-block;이라고 선언하지 않아도 된다.

• float를 적용하게 되면 레이아웃이 배치되는 일반적인 흐름에서 벗어나기 때문에 원하는 요소들을 따닥따닥 붙여서 배치할 수 있다.

• float를 적용하면 display 속성은 무시된다.

2. clear

clear는 float 해제 기법이다.
플로팅된 요소는 문서의 흐름에서 벗어난 상태를 가지고 있기 때문에 개발 도중에 레이아웃이 무너지는 현상을 겪지 않으려면 반드시 플로팅을 해제하여야 한다.

clear의 속성값

1. none : 기본값. 플로팅을 해제하지 않는다.
2. left : 왼쪽에 플로팅된 요소를 해제한다.
3. right : 오른쪽에 플로팅된 요소를 해제한다.
4. both : 양쪽에 플로팅된 요소를 해제한다.

float 해제 방법

1. overflow: hidden

float을 부여한 태그의 형제나 부모 태그에 overflow: hidden을 이용하면 간단히 float을 해제할 수 있다.

하지만 이 방법도 완벽하진 않다. 만약 부모 태그의 너비와 높이가 고정되어 있는데 자식 태그 중 부모 태그보다 너비와 높이가 큰 요소가 있다면 해당 자식 태그는 전체적인 모습을 보여주지 못하고 내용이 잘려 버릴 것이다.

2. :after를 이용

가상 요소를 이용하여 해제하는 방법이 있다.
:after를 사용하여 빈 가상 요소를 만들어준 뒤, float을 해제한다.

.parent(부모 태그):after {
	content: '';
	display: block;
	clear: both;