19 lines
1.6 KiB
Plaintext
19 lines
1.6 KiB
Plaintext
---
|
|
title: Describe Block Formatting Context (BFC) and how it works.
|
|
---
|
|
|
|
A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
|
|
|
|
Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.
|
|
|
|
A BFC is an HTML box that satisfies at least one of the following conditions:
|
|
|
|
- The value of `float` is not `none`.
|
|
- The value of `position` is neither `static` nor `relative`.
|
|
- The value of `display` is `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
|
|
- The value of `overflow` is not `visible`.
|
|
|
|
In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
|
|
|
|
Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
|