float란?
한 요소가 보통의 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치하는 것
즉, 부모요소 내부에 존재하지 않는, 컨텐츠 자체를 독립적인 요소로 만드는 CSS 프로퍼티이다.
위의 그림과 같이 텍스트가 사진을 감싸도록 보이게끔 만들어주는 속성이다.
하지만, 실제로는 보라색 박스 위에 초록색 박스의 이미지가 존재하고, 텍스트는 옆으로 밀렸다고 보면 된다.
위 사진과 같이 3차원적인 시선으로 보면 이해가 편하다.
아래의 영상을 확인하고 온다면 이해하기 훨씬 편할 것이다.
float의 문제점
하지만, 아래 그림과 같이 부모요소는 float: left 속성이 적용되어 있는 독립적인 이미지 요소를 인지하지 못하고, 부모요소 내에 있는 컨텐츠만 인식하고 높이를 설정하게 된다.
이로 인해 시각적으로 문제가 발생하는 것이다.
해결방법
이를 해결하기 위해서는 대표적으로 3가지 방법이 있다.
- overflow: hidden
- clearfix
- display: root
위와 같은 방법이 왜 이루어지는지는 먼저 BFC(Block Formatting Context)에 대해 이해해야한다.
BFC란?
W3C :
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
내 나름대로 해석하자면,
1. display: float 속성을 가진 요소,
2. position: absolute 속성을 가진 요소,
3. 블록 박스가 아닌 블록 컨테이너(inline-blocks, table-cells, and table-captions와 같은 요소)들,
4. overflow: visible을 제외한 overflow 속성을 가진 블록 박스
위의 요소들의 컨텐츠에 대한 새로운 블록 형식을 설정하는 것으로 해석된다.
MDN 사이트에 따르면, 아래와 같은 속성에 의해 BFC가 생성된다고 한다.
문서의 루트 요소(
<html>)
float: none가 아닌 요소
position: absolute or fixed인 요소
display: inline-block인 요소
display: table-cell인 요소 (HTML 표 칸의 기본값)
display: table-caption인 요소 (HTML 표 주석의 기본값)
display가 table table-row table-row-group table-header-group table-footer-group inline-table인 요소에 의해 생성된 이름 없는 칸
overflow: visible이 아닌 블록 요소
display: flow-root
contain: layout or content or paint인 요소
부모요소가display: flex or inline-flex이면서, 스스로가 flex, grid, table 의 속성을 가지지 않은 flex 아이템
부모요소가display: grid or inline-grid이면서, 스스로가 flex, grid, table 의 속성을 가지지 않은 grid 아이템
다열 컨테이너(column-count or column-width: auto가 아닌 경우. column-count: 1 포함).
column-span: all인 요소.
처음에는 부모 요소가 가출한 자식 요소를 데리고 와서 새롭게 집을 짓는 방법인 줄 알았으나,
그냥 부모 요소에 위 속성들을 적용시키면, 새로운 집을 짓는데, 가출한 자식 요소들까지 포함시키는 새로운 넓은 집을 짓는 방법이었다.
W3C : https://www.w3.org/TR/CSS2/visuren.html#normal-flow
MDN : https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context
1. 부모요소에 overflow속성을 부여하는 방법.
부모 요소에 overflow: hidden 속성을 주면, 그룹1, 그룹2의 높이와 너비에 더불어 아래와 같이 자체의 padding값을 함께 가지고 있는 모습을 볼 수 있다.
.parent {
...
overflow: hidden;
}2. 부모요소에 가상요소를 생성하고, clear 속성을 부여하는 방법. (clearfix)
부모요소 마지막에 가상요소를 생성하고, clear:both 속성을 부여하면, 해결할 수 있다.
.parent::after {
content: "";
display: block;
clear: both;
}3. 부모요소의 display속성에 flow-root를 사용하는 방법
.parent {
...
display: flow-root;
}위 3가지 방법을 통해 아래와 같은 결과물을 도출해 낼 수 있다.
