css float은 뭘까요? 또 어떻게 사용하는걸까요? 함께 알아봅시다!
1. float
CSS float는 HTML 요소를 좌우 방향으로 부유시키는 레이아웃 기능입니다.
float 속성을 적용하면 해당 요소는 normal flow에서 벗어나 부모 요소의 왼쪽이나 오른쪽에 위치할 수 있습니다.
float 속성은 일반적으로 이미지나 텍스트 블록을 페이지에 배치하거나, 다중 열 레이아웃 등을 만들 때 사용됩니다.
float 속성에는 left, right, none, inherit의 값이 있습니다. left 값은 요소를 왼쪽으로 부유시키고, right 값은 요소를 오른쪽으로 부유시킵니다.
none 값은 부유를 해제하고 normal flow로 돌아가게 합니다. inherit 값은 부모 요소에서 상속받은 속성 값을 사용합니다.
float 속성을 사용하면 해당 요소가 normal flow에서 벗어나 부모 요소에 대한 상대적 위치로 배치되기 때문에, float된 요소의 부모 요소는 float된 자식 요소의 높이를 인식하지 못합니다.
그렇다면 우리는 어떻게 해야할까요?
2. clear
CSS float 속성을 사용하면 해당 요소가 normal flow에서 벗어나 부모 요소의 왼쪽이나 오른쪽에 위치합니다. 그러나 float된 요소 다음에 normal flow에 위치하는 요소가 있다면, float된 요소의 높이를 고려하지 않고 배치할 가능성이 있습니다.
이러한 경우 clear 속성을 사용하여 float 속성이 적용된 자식 요소 이후의 요소들이 정상적으로 배치되도록 할 수 있습니다.
clear 속성은 float된 요소의 바로 다음에 위치하는 요소의 배치 방법을 지정하는 속성입니다.
clear 속성에는 left, right, both, none, inherit의 값이 있습니다.
left 값은 float: left; 속성이 적용된 요소 다음에 왼쪽에 위치하는 요소가 배치되도록 합니다.
right 값은 float: right; 속성이 적용된 요소 다음에 오른쪽에 위치하는 요소가 배치되도록 합니다.
both 값은 float된 요소가 양쪽에 위치하는 경우, 그리고 none 값은 clear를 적용하지 않는 것을 나타냅니다.
inherit 값은 부모 요소에서 상속받은 속성 값을 사용합니다.
CSS float 속성을 사용하면 해당 요소가 normal flow에서 벗어나 부모 요소의 왼쪽이나 오른쪽에 위치합니다.
float 속성을 해제하지 않으면 다음 요소들이 float된 요소의 위치를 고려하지 않고 배치될 수 있으므로,
float 속성을 해제하는 것이 중요합니다.
해제 방법이 어떤것들이 있는지 한번 확인해볼까요?
3. float 해제방법
3-1. clear 속성
앞서 말한 것처럼, clear 속성을 사용하여 float 속성을 해제할 수 있습니다.
clear 속성은 float된 요소의 다음 요소를 정상적으로 배치하기 위해 사용합니다.
clear 속성에 값을 지정하여 float된 요소의 위치를 해제할 수 있습니다.
다음은 clear 속성을 사용하여 float 속성을 해제하는 예시입니다.
<div style="clear:both;"></div>
3-2. overflow 속성
float된 요소의 부모 요소에 overflow 속성을 적용하여 float 속성을 해제할 수 있습니다.
이 방법은 float된 요소의 높이가 부모 요소의 높이를 벗어날 때 사용합니다.
overflow 속성에 값을 hidden이나 auto로 지정하여 float된 요소를 포함하는 부모 요소의 높이를 자동으로 조정하도록 합니다. 다음은 overflow 속성을 사용하여 float 속성을 해제하는 예시입니다.
.container {
overflow: auto;
}
3-3. display 속성
float 속성을 해제하는 또 다른 방법은, float된 요소를 포함하는 부모 요소의 display 속성 값을 변경하는 것입니다.
display 속성 값으로 table, flex, grid 등을 지정하여 float 속성을 해제할 수 있습니다.
이 방법은 float 속성을 해제하면서도 float된 요소의 위치를 유지할 수 있습니다.
다음은 display 속성을 사용하여 float 속성을 해제하는 예시입니다.
.container {
display: table;
}
3-4. clearfix 속성
clearfix는 float 속성을 해제하면서도 float된 요소의 위치를 유지하는 방법입니다. clearfix 클래스를 정의하여 float된 요소를 포함하는 부모 요소에 클래스를 추가하면, float된 요소의 위치를 유지하면서도 float 속성을 해제할 수 있습니다. clearfix 클래스는 다음과 같이 정의할 수 있습니다.
.clearfix::after {
content: "";
display: table;
clear: both;
}