float 속성

 

🟢  float

요소를 왼쪽 또는 오른쪽으로 밀어내고, 다른 요소들이 그 주변을 흐르게 하는 속성.

 

🔹 float

selector {
  float: left | right | none | inline-start | inline-end;
}

• left: 요소를 왼쪽으로 이동.
• right: 요소를 오른쪽으로 이동.
• none: 요소를 띄우지 않는다. (기본값)
• inline-start: 글쓰기 방향 기준 시작 쪽.
• inline-end: 글쓰기 방향 기준 끝 쪽.

 

⚠️ float 부작용 ⚠️

1️⃣ 부모 요소 높이가 사라짐 (collapse)

• 자식 요소에 float를 주면 부모 요소는 자식 요소를 일반 흐름에서 제외된 것처럼 인식한다.

 2️⃣ 레이아웃 깨짐

• float 요소가 예상과 다르게 배치된다.
• 다음 요소가 float 옆으로 붙어버린다.

3️⃣  이후 요소 겹침 문제

• float된 요소 아래에 있어야 할 요소가 옆으로 올라온다.

 

🧹 해결 방법: Clearing 🧹

1️⃣ clear 속성 사용

float 요소의 영향을 받지 않도록 배치를 정리하는 방법.

.next {
  clear: both;
}

• 지정한 방향의 float 요소 옆에 배치되지 않도록 막는 속성.
  
  • clear: left; (왼쪽 float 요소를 피함)
  • clear: right; (오른쪽 float 요소를 피함)
  • clear: both; (양쪽 float 모두 피함 - 가장 많이 사용)

 

2️⃣ clearfix 기법 (가장 많이 사용)

부모 요소가 float 자식을 포함하도록 만드는 방법.

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

• 핵심: 가상의 요소를 만들어 clear 적용.

 

3️⃣ overflow 활용 (간단하지만 주의 필요)

부모 요소가 Block Formatting Context(BFC) 를 생성하여 float 요소를 내부에 포함하게 만드는 방법.

.parent {
  overflow: hidden;
}

• 단점: 콘텐츠가 부모 영역을 넘으면 잘림, 스크롤 문제 발생 가능.

 

4️⃣ Flexbox / Grid 사용 (최신 방법: 추천)

float 대신 Flexbox 또는 Grid 레이아웃을 사용하여 문제 자체를 회피하는 방법.

.parent {
  display: flex;
}

• float은 원래 문서 흐름에서 요소를 빼버리는 방식이지만, 반면 Flexbox / Grid는 레이아웃을 위한 전용 시스템.
  (정상적인 흐름 유지)

👉  즉, float의 구조적 한계를 아예 사용하지 않음

 

 

📍  POINT 📍 

✔️ 전체 레이아웃을 잡을 때 float 보다는 Flexbox나 Grid를 사용하는 것이 표준이다. ✔️

✔️ 신문 기사 스타일 같은 사진 옆으로 글자가 흐르게 해야 하는 디자인에서는 float 이 유용하다. ✔️

✔️ float 을 썼다면 반드시 clear 처리를 해야한다. ✔️

 

 

📋 float vs flexbox vs grid 📋

특성	float	flexbox	grid
주 목적	텍스트 흐름 제어	1차원 정렬 (행/열)	2차원 격자 레이아웃
레이아웃 방식	문서 흐름에서 이탈	정상 흐름 유지	명시적 격자 배치
난이도	높음 (해제 작업 필요)	낮음 ~ 보통	보통
사용 시점	이미지 + 텍스트 배치	UI 컴포넌트 (메뉴, 카드)	전체 페이지 설계

 

 

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

<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>