CSS Float property

과거 웹 레이아웃의 핵심이었으며 현재도 텍스트 흐름을 제어할 때 요긴하게 쓰이는 CSS Float 속성에 대해 알아보겠습니다.

---

1. 정의 (Definition)

float은 사전적 의미로 '뜨다' 또는 **'부풀다'**라는 뜻을 가집니다.

CSS에서는 요소를 일반적인 흐름(Normal Flow)에서 벗어나게 하여 부모 요소의 왼쪽(left)이나 오른쪽(right)으로 띄워 배치하는 속성입니다.

본래 이 속성은 이미지 주위를 텍스트가 감싸도록 만들기 위해 고안되었습니다.

---

2. 주요 속성값

• none: 요소를 띄우지 않습니다. (기본값)
• left: 요소를 부모 컨테이너의 왼쪽에 배치하고, 다른 콘텐츠(텍스트 등)는 그 오른쪽으로 흐르게 합니다.
• right: 요소를 부모 컨테이너의 오른쪽에 배치하고, 다른 콘텐츠는 그 왼쪽으로 흐르게 합니다.

---

3. Float의 부작용과 해결 방법 (Clearing)

요소가 '붕 뜨게' 되기 때문에, 다음에 오는 요소들이나 부모 요소가 float된 요소의 높이를 인식하지 못하는 문제가 발생합니다.

1) clear 속성 사용

float의 영향을 받지 않으려는 다음 요소에 clear를 사용합니다.

• clear: left; (왼쪽 플로팅 해제)
• clear: right; (오른쪽 플로팅 해제)
• clear: both; (양쪽 모두 해제 - 가장 많이 사용)

2) 클리어픽스(Clearfix) 기법

부모 요소의 높이가 사라지는 문제를 해결하기 위해 부모 요소에 가상 요소(::after)를 만들어 초기화하는 현대적인 방식입니다.

CSS

 

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

---

🖥️ 실전 예제 코드: "텍스트 감싸기"

HTML

 

<style>
  .float-img {
    float: left; /* 이미지를 왼쪽으로 띄움 */
    width: 150px;
    margin-right: 20px;
    margin-bottom: 10px;
  }

  .container {
    border: 1px solid #ccc;
    padding: 10px;
  }

  /* 부모 요소 높이 상실 방지 */
  .container::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<div class="container">
  <img src="flower.jpg" alt="꽃" class="float-img">
  <p>이 텍스트는 이미지의 오른쪽 공간을 채우며 자연스럽게 흐릅니다. 
     플로팅된 요소는 마치 수면에 뜬 종이배처럼 동작하며, 
     주변의 인라인 요소들은 그 공간을 피해 배치됩니다.</p>
</div>

---

📋 Float vs Flexbox vs Grid

특성	Float	Flexbox	Grid
주 목적	텍스트 흐름 제어	1차원 정렬 (행/열)	2차원 격자 레이아웃
난이도	높음 (해제 작업 필요)	보통	보통
사용 시점	이미지 옆 글자 배치 시	메뉴 바, 카드 나열 등	전체 페이지 설계 시

---

학습 정리

• 전체 레이아웃을 잡을 때는 이제 float보다는 Flexbox나 Grid를 사용하는 것이 표준입니다.
• 하지만 신문 기사 스타일처럼 사진 옆으로 글자가 흐르게 해야 하는 디자인에서는 여전히 float이 유일하고 강력한 해결책입니다.
• float을 썼다면 반드시 clear 처리를 잊지 마세요!

---

요소를 띄워 흐름을 만드는 float 속성을 정복하셨습니다!