CSS 레이아웃과 밀접한 키워드는 normal flow, BFC, IFC로 3가지가 있다. 그 중 BFC에 대해 알아보자
블록 서식 맥락(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다. -MDN
MDN을 비롯한 타 사이트들은 BFC를 위와 같이 정의하였다. 말이 너무 어려워서 내 방식대로 풀어서 해석해보았다.
<html>
은 웹 문서의 시작을 알리는 최상위 요소로, 하위 요소들이 독립적인 레이아웃을 가질 수 있도록 되어 있다.
float
이 none이 아닌 속성값을 가질 때, 해당element는 normal flow를 벗어나 떠 있는 부동 요소가 되면 BFC가 생성된다.
<a href="/">a태그</a>
a {
float: left;
}
position
속성값이 absolute
나 fixed
일 경우요소가 형제와 조상의 크기나 위치에 영향을 주지 않고 normal flow에서 벗어남으로 BFC를 형성하게 된다.
display: nline-block
inline-block은 inline 요소처럼 행동하는 또 다른 block 요소로, BFC를 형성하게 된다.
display: table-cell
. HTML 표 칸의 기본값display: table-caption
. 표 주석의 기본값display: table
display: table-row
display: table-row-group
display: table-header-group
display: table-footer-group
display: inline-table
요소가 암시적으로 생성한 무명 칸overflow
가 선언된 요소 (visible 제외)overflow가 visible 이외의 값을 가진다는 것은 공간에 대한 크기를 정의했다고 볼 수 있기 때문에 BFC를 형성하게 된다.