WeniVooks

float

1. float

float 속성은 요소를 페이지의 일반적인 레이아웃 흐름에서 벗어나게 하여, 텍스트나 다른 인라인 요소들이 그 주위를 감싸도록 만드는 레이아웃 기술입니다. 이 속성은 원래 잡지 레이아웃에서 영감을 받아, 이미지를 텍스트 사이에 자연스럽게 배치하기 위해 도입되었습니다. float를 사용하면 요소가 마치 물 위에 떠 있는 것처럼 동작하여, 컨테이너의 좌측이나 우측으로 이동하게 됩니다. 이로 인해 주변의 콘텐츠가 float된 요소를 둘러싸게 되어, 더 유동적이고 다양한 레이아웃 구성이 가능해집니다. 비록 최근에는 Flex나 Grid와 같은 현대적인 레이아웃 기술이 주로 사용되지만, float는 여전히 특정 상황에서 유용하게 활용되고 있습니다.

• left: 요소를 왼쪽으로 띄웁니다.
• right: 요소를 오른쪽으로 띄웁니다.
• none: 기본값으로, 요소를 띄우지 않습니다.

1.1 float 해제하기

float를 사용하면 레이아웃에 예기치 않은 영향을 줄 수 있습니다. 이를 방지하기 위해 clear 속성을 사용하여 float를 해제할 수 있습니다. clear: left는 왼쪽에 float된 요소 다음에 오도록 하지만 오른쪽 float는 해제하지 않고, clear: right는 오른쪽에 float된 요소 다음에 오도록 하며 왼쪽 float는 해제하지 않습니다. 반면 clear: both는 모든 방향의 float를 한 번에 해제할 수 있어 더 안전하고, 레이아웃 변경 시 추가 수정이 필요 없어 유지보수가 용이하며, 왼쪽과 오른쪽 float가 혼재된 복잡한 레이아웃에서도 효과적으로 작동합니니다. 따라서 clear: both는 가장 포괄적이고 안전한 방법으로, 대부분의 상황에서 권장됩니다.

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

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

1.2 float 사용 시 주의사항

자식 요소들이 모두 float 속성을 가지면, 부모 컨테이너의 높이가 자식 요소들의 높이를 포함하지 않는 문제가 발생할 수 있습니다. 다음은 이를 해결하기 위한 3가지 방법입니다.

1. 부모에 높이 값 지정하기 (유연성이 떨어짐)

.container {
  height: 100px;
}

.container {
  height: 100px;
}

2. 부모에 overflow: hidden 적용하기

.container {
  overflow: hidden;
}

.container {
  overflow: hidden;
}

3. clearfix 방법 사용하기 (가장 널리 사용되는 방법)

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

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

아래 코드에서 첫 번째 .container는 아무 해결책도 적용되지 않아 float 문제를 보여줍니다. .height-fix는 고정 높이를 설정하여 문제를 해결합니다. 하지만 이 방법은 콘텐츠의 양이 변하거나 화면 크기가 바뀌어도 부모 요소의 높이가 자동으로 조절되지 않기 때문에 유연성이 떨어집니다. .overflow-fix는 overflow: hidden을 사용하여 문제를 해결합니다. .clearfix는 가상 요소를 사용하여 float를 해제합니다.

각 해결 방법의 주석을 해제하면, 부모 컨테이너가 float된 자식 요소들의 높이를 올바르게 포함하는 것을 확인할 수 있습니다.

float는 과거에 레이아웃을 구성하는 주요 방법이었지만, 현재는 Flexbox나 Grid 같은 현대적인 레이아웃 기술들이 더 많이 사용됩니다. 그러나 여전히 레거시 코드에서 float를 볼 수 있으며, 특정 상황(예: 이미지를 텍스트 주변에 배치)에서는 유용하게 사용됩니다.