float란?

float는 '띄우다'라는 의미로, html/css에서는 레이아웃을 구성할 때 요소를 오른쪽 혹은 왼쪽으로 띄우기 위해 사용되는 속성이다. float를 사용하면 문서의 흐름에서 벗어나 유연한 배치가 가능해진다.

최근에는 float보다 간단하고 쉬운 flex-box를 주로 사용한다.

float 사용시 주의점

float을 적용할 때 주의할 점은 position: absolute;와 함께 쓸 수 없다는 것이다. absolute가 적용된 개체는 float 속성을 무시하게 된다.

float: left/right/none;

float: left;
float: left;
float: none;

float에는 left, right, none 이렇게 세가지 속성이 존재한다.
left는 왼쪽으로, right는 오른쪽으로, none은 요소를 띄우지 않는 기본값이다.

.img {
    width: 90px;
    height: 90px;
    float: left;
    margin: 10px;
}

이렇게 이미지에 float: left;를 주면 이미지가 왼쪽으로 띄워지면서 텍스트는 이미지를 감싸는 형태로 나타난다.

clear

그런데 위처럼 텍스트가 이미지를 감싸는 형태가 아니라 텍스트를 이미지 아래로 내리고 싶다면 어떻게 할까? 이럴때 사용할 수 있는 속성이 clear이다.
float된 요소 주변으로는 그 방향으로 흐르듯이 배치가 되는데, clear를 사용하면 그 이후 영역 부터는 float가 적용되지 않는다.

왼쪽으로 float된 것을 취소하는 clear: left;
오른쪽으로 float된 것을 취소하는 clear: right;
왼쪽, 오른쪽 모두 float된 것을 취소하는 clear: both;

따라서, 이 경우에 텍스트가 이미지 아래에 배치하고 싶다면 텍스트에 왼쪽으로 float된 것을 지워주는 clear: left;를 사용한다.

.img {
    width: 90px;
    height: 90px;
    float: left;
    margin: 10px;
}

.txt {
    clear: left;
}

clearfix

float를 사용하게 되면 부모 요소가 float된 요소의 공간을 반영하지 못해서 레이아웃이 깨지게 되는 문제가 발생할 수 있다. 이럴 때 clearfix를 사용해 문제를 해결할 수 있다. clearfix에는 네 가지 방법이 있다.

01. 가상요소 ::after 사용

float 속성을 적용한 요소의 부모에 ::after 를 사용해 그 안에 clear: both;를 사용하는 것이다. clear both는 왼쪽 오른쪽 모두 적용이 되기 때문에 항상 both를 사용해도 무방하다.

02. overflow 사용

부모 요소에 overflow: hidden; 이나 overflow: auto;를 적용해준다. hidden의 경우 넘친 부분이 잘리게 되고, auto의 경우에는 넘친 만큼 스크롤이 생긴다. hidden은 컨텐츠가 잘린다는 점에서 auto를 사용하는 것이 추천된다.

03. 빈 엘리먼트 생성 후 clear 적용

1번과 거의 같은 방법으로, 빈 엘리먼트를 만든 후 거기에 clear를 해주는 것이다. 아무 의미 없는 요소를 추가하는 것이므로 이 방법 보다는 1번의 방법을 권장한다고 한다.

04. 부모 요소에 float

자식과 같은 float를 부모 요소에도 주는 방법이다. 이렇게 하면 부모 요소도 float 되어 inline의 성질을 띄게 되므로 레이아웃을 짤 때 주의해야 한다.