CSS 레이아웃과 밀접한 키워드는 normal flow, BFC, IFC로 3가지가 있다. 그 중 BFC에 대해 알아보자
블록 서식 맥락(BFC)이란?
블록 서식 맥락(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다. -MDN
MDN을 비롯한 타 사이트들은 BFC를 위와 같이 정의하였다. 말이 너무 어려워서 내 방식대로 풀어서 해석해보았다.
- css 속성에 의해 기존의 block이 아닌 새로운 형태로 형성되는 블록 형식의 콘텐츠
- block 속성이 부여되어 다르게 렌더링 되는 현상 또는 그러한 형태
생성 조건
문서의 루트 요소일 때
<html>은 웹 문서의 시작을 알리는 최상위 요소로, 하위 요소들이 독립적인 레이아웃을 가질 수 있도록 되어 있다.
플로팅(Floating) 되었을 때
float 이 none이 아닌 속성값을 가질 때, 해당element는 normal flow를 벗어나 떠 있는 부동 요소가 되면 BFC가 생성된다.
예제
- float 속성을 선언하고 개발자도구를 확인해보면 display가 inline에서 block으로 변경되는 것을 볼 수 있음
<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를 형성하게 된다.
기타
- display가 flow-root인 경우
- contain가 layout, content, paint일 경우
- flex 아이템이나 grid 아이템의 경우
특성
- 마진 상쇄를 막을 수 있음
- 컨테이너가 페이지의 normal flow에서 벗어나 떠 있고 높이가 없는, 부동 요소인 자식 요소를 포함하도록 확장시켜줌 (float, position: absolute의 경우)
- float된 요소를 감싸는 텍스트를 분리시킬 수 있음
참고
박선우