1. float

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

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

<div class="container">
  <div class="box float-left">Left Float</div>
  <div class="box float-right">Right Float</div>
  <p>
    This is some text that will wrap around the floated elements. Notice how the
    text flows around the boxes.
  </p>
</div>

.container {
  border: 2px solid #333;
  padding: 10px;
  overflow: hidden;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  margin: 5px;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

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 중 선택 */
}

1.2 float 사용 시 주의사항

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

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

.container {
  height: 100px;
}

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

.container {
  overflow: hidden;
}

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

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

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

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

<div class="container">
  <div class="box">Float 1</div>
  <div class="box">Float 2</div>
</div>

<div class="container height-fix">
  <div class="box">Height Fix</div>
  <div class="box">Height Fix</div>
</div>

<div class="container overflow-fix">
  <div class="box">Overflow Fix</div>
  <div class="box">Overflow Fix</div>
</div>

<div class="container clearfix">
  <div class="box">Clearfix</div>
  <div class="box">Clearfix</div>
</div>

.container {
  border: 2px solid #333;
  margin-bottom: 20px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  margin: 5px;
  float: left;
}

/* 해결방법 1: 부모에 높이 값 지정하기 */
.height-fix {
  /* height: 110px; */ /* 주석을 해제하여 효과 확인 */
}

/* 해결방법 2: overflow: hidden 사용하기 */
.overflow-fix {
  /* overflow: hidden; */ /* 주석을 해제하여 효과 확인 */
}

/* 해결방법 3: clearfix 방법 사용하기 */
.clearfix::after {
  /* 
  content: "";
  display: block;
  clear: both;
  */ /* 주석을 해제하여 효과 확인 */
}

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