BFC (Block Formatting Content)
웹페이지에 나타나 있는 블록들이 보여지는 CSS 렌더링의 일부이다.
너무 어려운 말이지만 그냥 Block의 속성이 다시 부여되어 다르게 렌더링 되는 현상혹은 그러한 컨텐트 라고 이해하면 된다. 블록 컨텐트의 서식 모델이라고 한다.
이러한 컨텐트를 생성하기 위해서는 다양한 속성들이 관여되어있는데 이들 중 하나라도 속성이 들어가 있는 엘레먼트들은 모두 BFC라고 할 수 있다.
- 문서의 루트 요소(<html>).
- 플로팅 요소(float이 none이 아님).
- 절대 위치를 지정한 요소(position이 absolute 또는 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 (HTML 표에서, 각각 표 전체, 행, 본문, 헤더, 푸터의 기본값) 또는 inline-table인 요소가 암시적으로 생성한 무명 칸.
- overflow가 visible이 아닌 블록 요소.
- display가 flow-root.
- contain이 layout, content, paint.
- 스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 플렉스 항목(display가 flex 또는 inline-flex인 요소의 바로 아래 자식)
- 스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 그리드 항목(display가 grid 또는 inline-grid인 요소의 바로 아래 자식)
- 다열 컨테이너(column-count 또는 (column-width가 auto가 아닌 경우. column-count: 1 포함).
- column-span이 all인 경우. 해당하는 요소가 다열 컨테이너 안에 위치하지 않아도 항상 새로운 블록 서식 맥락을 생성해야 합니다. (명세 변경, Chrome 버그)
활용
- BFC는 마진 겹침현상을 방지한다. 즉, 위 속성모두가 margin 겹침현상을 일어나지 않게 한다.
- float 된 요소들을 부모 컨테이너 안으로 들여 놓는다.
- float된 요소를 글자들이 감싸는 것을 분리 한다.
참고
github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/bfc.md
baeharam/Must-Know-About-Frontend
:mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context
블록 서식 맥락 - 웹 개발자 안내서 | MDN
블록 서식 맥락(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다. 블록 서식 맥
developer.mozilla.org
www.sitepoint.com/understanding-block-formatting-contexts-in-css/
Understanding Block Formatting Contexts in CSS - SitePoint
Ritesh Kumar delves into the CSS spec to explain, with demos and diagrams, what is meant by "block formatting contexts" and how they affect page layout.
www.sitepoint.com
'CodeTech > HTML\CSS' 카테고리의 다른 글
| CSS - 가로세로 가운데 정렬 (0) | 2021.02.07 |
|---|---|
| CSS - z-index의 동작방식 (0) | 2021.02.07 |
| CSS - 마진겹침현상 (Margin-Collapsing) (0) | 2021.02.07 |
| CSS - float (0) | 2021.02.07 |
| Semantic 마크업 (0) | 2021.01.16 |
