CSS 기초(8) float

float란?

요소를 왼쪽이나 오른쪽으로 띄워서,

텍스트나 다른 요소가 그 옆을 감싸도록 만드는 속성

​

원래 목적은 신문처럼 이미지 옆에 글자 흐르게 하려고 만든 속성

​

float: left; /* 왼쪽으로 띄움 */

float: right; /* 오른쪽으로 띄움 */

float: none; /* 기본값 */

​

float가 적용되면 일어나는 변화 3가지

요소가 왼쪽 또는 오른쪽으로 이동함

요소가 위쪽으로 최대한 붙음

요소가 공중으로 뜨면서, 다음 요소들이 옆으로 흐름

1️⃣ 가장 기본 예제 (float: left)

​

<div class="box red">A</div>

<div class="box blue">B</div>

<div class="box green">C</div>

​

.box {

width: 100px;

height: 100px;

float: left;

}

​

.red { background: red; }

.blue { background: blue; }

.green { background: green; }

​

결과: A B C 가 왼쪽부터 가로로 나란히 배치됨

​

2️⃣ float: right 예제

​

.box {

float: right;

}

오른쪽부터 C B A 순서로 정렬됨

​

​

float의 진짜 특징: “공간에서 뜬다”

​

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

<p>나는 아래 글자</p>

​

.float-box {

width: 100px;

height: 100px;

background: red;

float: left;

}

​

원래라면 p는 아래로 가야 하는데

👉 float 요소 옆으로 글자가 올라옴

→ float는 레이아웃 흐름에서 빠진 상태가 됨

​

float 최대 문제점: 부모 높이가 사라짐

​

<div class="parent">

<div class="child"></div>

</div>

​

.parent {

background: yellow; /* 높이가 안 잡힘 */

}

​

.child {

width: 100px;

height: 100px;

background: red;

float: left;

}

​

.child가 float되면

👉 .parent는 자식 높이를 인식 못함 → 높이 0처럼 됨

이게 float 최대 단점

​

해결 방법: clear (float 해제)

.clear {

clear: both;

}

clear: both = 왼쪽·오른쪽 float 전부 무효화

​

<div class="parent">

<div class="child"></div>

<div class="clear"></div>

</div>

​

가장 많이 쓰는 정석 해결법: clearfix

.parent::after {

content: "";

display: block;

clear: both;

}

👉 부모가 다시 자식 높이를 정상적으로 인식함

👉 실무에서 float 쓰면 거의 항상 같이 쓰는 패턴

​

​

항목	float	flex
원래 목적	이미지 감싸기	레이아웃 전용
부모 높이	❌ 사라짐	✅ 자동 적용
가로 정렬	가능	더 강력
실무 사용	레거시	현재 표준

• float: left / right = 요소를 띄운다
• float되면 레이아웃 흐름에서 빠진다
• 그래서 부모 높이가 사라진다
• 해결은 clear 또는 clearfix
• 요즘 레이아웃은 flex 사용