CSS 평면 요소 배치 float

1차원적으로 요소를 배치하기 위한 방법을 알아보자.

float

요소를 페이지의 일반적인 레이아웃 흐름에서 벗어나 텍스트나 다른 인라인 요소들이 그 주위를 감싸도록 만든다.
이 속성은 원래 잡지 레이아웃에서 영감을 받아, 이미지를 텍스트 사이에 자연스럽게 배치하기 위해 도입되었다고 한다.

float를 사용하면 요소가 마치 물 위에 떠 있는 것처럼 동작하여, 컨테이너의 좌측이나 우측으로 이동하게 된다.
이로 인해 주변의 콘텐츠가 float된 요소를 둘러싸게 되어, 더 유동적이고 다양한 레이아웃 구성이 가능해진다.

17년대 쯔음에 CSS를 접했을 때는 flex와 grid보다 float으로 배치를 많이 했던 기억이 있다.
현재는 flex와 grid로 배치하는 방법을 더 많이 사용한다.
mdn float

float 속성

left / right

요소를 왼쪽 혹은 오른쪽으로 띄우는 방법이다.

.float-left {
  float: left;
}
.float-right {
  float: right;
}

none

기본값으로, 요소를 띄우지 않는다.

.float-left {
  float: left;
}

/* 마우스를 올렸을 때는 띄우지 않으려면 */
.float-left:hover {
  float: none;
}

주의사항

float를 적용하면 요소는 블록 레이아웃을 사용하기 때문에, inline이나 inline-block 요소에 float를 적용하면 자동으로 block으로 변환된다.

float 해제

float를 사용하면 레이아웃에 예기치 않은 영향을 줄 수 있다.
이러한 상황을 방지하기 위해 clear 속성을 사용하여 float를 해제할 수 있다.

.clear-float {
  clear: both; /* left, right, both 중 선택 */
}

• clear: left
  왼쪽에 float된 요소 다음에 오도록 한다.
• clear: right
  오른쪽에 float된 요소 다음에 오도록 한다.
• clear: both
  모든 방향의 float를 한 번에 해제 한다.

clear: both를 사용하면 레이아웃 변경 시 추가 수정이 필요 없어 유지보수가 용이하며, float를 다양하게 사용하여 복잡한 레이아웃에서도 효과적으로 작동한다.
따라서 clear: both는 대부분의 상황에서 권장된다.

주의사항

자식 요소들이 모두 float 속성을 가지면, 부모 컨테이너의 높이가 자식 요소들의 높이를 포함하지 않는 문제가 발생할 수 있다.

부모에 높이 값 지정

부모의 값에 고정된 높이를 지정할 수 있다.
이 경우 자식 요소의 변화에 따라 유동적으로 높이 조절이 어렵다는 단점이 있다.

.container {
  height: 100px;
}

overflow: hidden

넘치는 부분을 hidden으로 감춰주는 속성을 이용하여 해결할 수 있다.

.container {
  overflow: hidden;
}

clearfix

가상 요소를 사용하여 clear: both 속성으로 float를 해제할 수 있다.
가장 널리 사용되는 방법이다.

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}