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
원래 텍스트 블록 내에서 float 이미지를 위한 float 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. flexbox와 grid의 출현과 함께 floa
developer.mozilla.org
'Front-End > CSS' 카테고리의 다른 글
| CSS: 박스 모델 (0) | 2025.06.14 |
|---|---|
| CSS 선택자: 결합자(Combinator) (0) | 2025.06.13 |
| CSS 선택자: 의사 클래스와 의사 요소 (0) | 2025.06.12 |
| CSS 선택자: 속성 선택자 (0) | 2025.06.11 |
| CSS 선택자: 유형, 클래스 및 ID (0) | 2025.06.10 |