CSS 레이아웃: Floats

1. float란?

• float 속성은 요소를 왼쪽(left) 또는 오른쪽(right)으로 띄워서 텍스트나 인라인 요소가 그 주위를 감싸도록 만드는 기능입니다.
• 이때 해당 요소는 문서의 일반 흐름(normal flow)에서 벗어나지만, 포지션 절대값(absolute)과 달리 여전히 레이아웃의 일부로 동작합니다.

 

---

2. 기본 사용법

HTML

<h1>간단한 float 예제</h1>

<div class="box">float</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

<p>
  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
  a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

CSS (플로트 적용 전)

.box {
  width: 150px;
  height: 100px;
  background-color: lightgreen;
  padding: 1em;
}

결과: .box는 텍스트 위에 덩그러니 나타납니다.

 

---

플로트 적용

.box {
  float: left;
  margin-right: 15px;
  /* 앞선 스타일 유지 */
}

 

• .box가 왼쪽으로 띄워지고,
• 텍스트가 .box 오른쪽을 감싸는 형태로 흐릅니다.
• float: right;를 사용하면 그 반대(우측 띄우기)도 가능합니다.

 

---

3. 플로트 후의 특이점

• 플로팅 요소 다음 나오는 요소는 그 뒤로 흐릅니다. (뒤에 접혀 들어감)
• 아래 예시처럼 p.special에 배경색을 적용하면, 그 배경이 플로트 요소 아래까지 지나감을 볼 수 있습니다.

<!-- 기존 코드의 첫 번째 <p> 요소에 special 클래스 추가 -->
<p class="special">...</p>

.special {
  background: lightblue;
  padding: 10px;
}
.box {
  float: left;
  margin: 15px;
}

 

---

4. clear 속성으로 플로트 흐름 제어

• clear: left | right | both;를 사용하여 특정 방향 플로트 이후 줄 바꿈을 강제할 수 있습니다.
• 예: 플로트된 요소 아래에 나오길 원할 때

<!-- 두 번째 <p> 요소에 below 클래스 추가 -->

<p class="special"> ... </p>

<p class="below"> ... </p>

<p> ... </p>

.below {
  clear: left;
}

 

---

5. 부모 요소 안에서 플로트 감싸기

플로트가 존재하면 부모 요소의 배경색이나 높이가 정확히 인식되지 않는 경우가 있습니다.
이럴 때는 부모에 display: flow-root;를 적용하면 플로트 높이를 포함한 컨테이너가 만들어집니다.

<!-- 기존 html코드 상단에 추가 -->

<div class="container">
  <div class="box">float</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate.
  </p>
</div>

.container {
  display: flow-root;
  background: lavender;
  padding: 10px;
}

 

---

6. 요약 정리

기능	설명
float	요소를 왼쪽/오른쪽으로 띄움
텍스트 래핑	플로트를 요소 주변 텍스트가 감쌈
clear	플로트 다음 줄에서 강제 띄움
display: flow-root	부모에 플로트 영역 포함 컨테이너 생성

 

---

7. 현재는?

• 원래 목적: 이미지 옆으로 텍스트 흐르게 하기
• 한때 레이아웃용으로 남용되었지만, Flexbox와 Grid 등장 이후로는 주로 플로트 본래 용도로만 사용됩니다 .

 

출처

Floats - Web 개발 학습하기 | MDN