float 는 요소를 컨테이너의 왼쪽 또는 오른쪽으로 뜨게 만들어 주변 텍스트가 그 주위를 감싸게 하는 속성이다.
요소가 일반 문서 흐름에서 빠져나와 레이아웃을 망가뜨린다.
이번 글에서는 float 를 적용했을 때 실제로 일어나는 일들과 float 로 망가진 레이아웃을 복구하는 방법을 정리해보았다.
float를 사용하면 일어나는 일들
1. float를 주는 순간, 자식은 집을 나간다.
기본적으로 부모 요소의 높이는
→ 자식 요소들의 높이 합으로 계산된다.
예시
<div class="parent">
<div class="child red">Child</div>
<div class="child yellow">Child</div>
<div class="child blue">Child</div>
</div>이 상태에서 parent의 height가 600px이라면,
그건 세 자식의 높이 합이기 때문이다.
그런데 자식 하나에 float 를 주면?
red는 위로 붕 뜨고 부모는 red를 자식으로 인식하지 못한다.
parent의 height = yellow + blue = 400px
→ float 된 요소는 부모의 height 계산에서 제외된다.
2. float를 주면 display와 상관없이 block이 된다.
어떤 요소든 float 를 주는 순간
요소의 display 타입과 상관없이 block이 된다.
예시
<div class="parent">
<span class="child red">Child</span>
<span class="child yellow">Child</span>
<span class="child blue">Child</span>
</div>
span 은 원래 display: inline 이다.
하지만 여기에:
.red {
float: left;
}을 주는 순간,
모두 block처럼 동작한다.
그래서 가능해지는 것들:
.red {
float: left;
width: 200px;
height: 200px;
}
3. 하지만 float block은 “길막을 못 하는 block”이다.
float 로 만들어진 block은
일반 block처럼 공간을 독점하지 않는다.
block의 원래 성질
① width를 안 주면
→ 부모 content-box의 100% 차지
예시
.child {
height: 200px;
}width 미지정 상태에서 이 셋은 부모의 content-box와 동일한 width를 가지게 된다.
여기에 float: left 를 주면
자신의 content 크기만큼만 width를 가진다.
즉,
block이지만 옆에 다른 요소가 비집고 들어올 수 있다.
② width를 주면
→ 나머지 공간을 자동으로 margin처럼 차지 (길막)
red한테 width: 100px 을 주게 되면 아래와 같이 된다.
여기에 float: left 를 주면
나머지 공간을 자동으로 margin으로 채우지 않고, yellow가 올라오게 된다.
예시
red: float: left
yellow: float: left
blue: 일반 block
→ red, yellow는 붕 떠서 위로 가고 blue가 위 공간을 채운다.
→ parent의 height = blue의 height
만약에 blue마저 float: left를 준다면,
parent의 height = 0이 된다.
이게 레이아웃의 붕괴를 초래하게 된다!
4. float는 block은 못 보지만, inline은 기가 막히게 본다.
예시
<div class="parent">
<div class="child red">Child</div>
<div class="child yellow">Child</div>
<div class="child blue">Child</div>
</div>
<div class="other">
Lorem ipsum...
</div>.red, .yellow, .blue {
float: left;
}.other (block 요소) 는
→ 부모가 비어 있다고 생각하고 위로 올라옴
하지만 .other 안의 텍스트(inline) 는
→ float 요소를 정확히 인식하고 피해 흐름
즉,
float 는 inline 콘텐츠에게만 보이는 존재이다.
float로 망가진 레이아웃 고치기
1. overflow: hidden
자식 요소에 float 를 적용하면,
부모는 float 된 자식을 높이 계산에서 제외하게 되고,
부모의 height는 0으로 붕괴된다.
이때 부모 요소에 overflow: hidden; 을 적용하면,
부모가 float 된 자식을 다시 감싸게 되고,
자식 요소를 포함하여 높이를 계산하게 된다.
→ 그 결과, 붕괴되었던 레이아웃이 정상적으로 복구된다.
2. Clearfix
① clear 란?
clear 는 float 때문에 생긴 문제를 해결하기 위해 만들어진 속성이다.
위의 요소에 이렇게 float 속성을 주게 되면
당연히 아래의 block 위에 겹치게 올라오게 된다.
하지만 clear: left 속성을 주게 되면 위에 있는 float 감지하여 그 아래로 내려가게 되고,
부모는 아래 자식을 기준으로 height를 계산할 수 있게 된다.
② clear의 값
clear: leftclear: rightclear: both(가장 많이 사용)
③ 가상 요소로 clearfix 구현
불필요한 html 요소를 만드는 대신에, css로 가상 요소를 만들면 된다.
가상 요소가 부모의 마지막 자식처럼 추가되어 clear 를 적용하고, 그 결과 부모의 height가 정상적으로 복구된다.
.parent::after {
content: ''; <--! 가상 요소는 content 필수로 적어야 함 -->
display: block;
clear: both;
}→ clear는 block 요소에만 적용 가능하다.
★★ display: block 필수
