CSS Float 속성 완전 정복! – 플로트 레이아웃 기본 이해

안녕하세요! 이번 포스팅에서는 CSS의 float 속성이 어떻게 동작하는지, 그리고 플로트를 쓰면서 마주치는 대표적인 이슈들을 정리해볼게요. 😎

---

1️⃣ 프로젝트 준비

• 이전 섹션에서 완성한 블로그 포스트 페이지를 복제해 CSS-Layouts 폴더로 준비
• VS Code에서 Go Live로 서버 재시작 ✔️

---

2️⃣ float 속성의 핵심 동작 원리

1. 문서 흐름에서 제거
   • float: left 또는 float: right를 주면 해당 요소가 일반적인 블록 흐름에서 분리
2. 텍스트 및 인라인 요소 감싸기
   • 분리된 요소 주위를 텍스트가 마치 물 흐르듯 wrapping
3. 컨테이너 높이 붕괴(Collapse)
   • 부모 요소는 떠 있는(floated) 자식의 높이를 인식하지 못해, 높이가 0으로 산정
   • padding이나 border 없이는 부모 배경·테두리가 사라짐

---

3️⃣ 실습 예제 요약

• 이미지 + 문단을 각각 .author-img, .author 클래스로 감싼 뒤
• .author-img { float: left; margin-right: 20px; } 로 텍스트 감싸기
• 두 요소 모두 float: left 처리 시, 문단이 이미지 오른쪽에서 시작 ✔️
• 부모 헤더(header) 안의 h1과 nav도 각각 float: left/right 적용
  • 이때 헤더 높이가 0으로 collapse되는 현상 확인

---

4️⃣ float vs. absolute 비교

구분floatposition: absolute

문서 흐름	제거(out-of-flow)	제거(out-of-flow)
주변 요소 영향	텍스트 감싸기 가능	주변 요소에 전혀 영향 없음
부모 높이 인식	인식 못 함 (붕괴)	인식 못 함 (붕괴)

 

---

🚀 다음 강의 예고

부모 컨테이너의 높이 붕괴 문제를 해결하는 방법(“클리어링” 기법 등)을 알아볼 예정이에요.
궁금하시다면 다음 포스팅도 놓치지 마세요! 🔥

---

도움이 되셨다면 공감 ❤️과 구독 ⭐ 부탁드려요~ 댓글로 궁금한 점도 남겨주세요!