How to understand BFC in CSS?

How to understand BFC in CSS?

Definition: Block Formatting Context (BFC) is a part of the visual CSS rendering of a Web page. It is the area where the layout process of the block box occurs, and it is also the area where floating elements interact with other elements.
BFC characteristics and applications
  • The margins will collapse under the same BFC

Code understanding

<style>
div{
    width: 100px;
    height: 100px;
    background: red;
    margin: 100px;
}
</style>

//The two div elements are under the same BFC container (here, the body element), so the bottom margin of the first div overlaps with the top margin of the second div, and the distance between the two boxes is only 100px instead of 200px
<body>
    <div></div>
    <div></div>
</body>

// This is not a CSS bug, we can understand it as a specification. If you want to avoid overlapping margins, you can put it in a different BFC container
  • BFC can contain floating elements (clear floating)

We all know that floating elements will break away from the normal document flow. Let’s take a look at the following example

// Since the elements in the container float and break away from the document flow, the container only has a margin height of 2px. If the BFC of the container is triggered, the container will be wrapped with floating elements
<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: red;float: left;"></div>
</div>

// Next, we will clear the floating to trigger the BFC, which will wrap the floating element

<div style="border: 1px solid #000;overflow:hidden">
    <div style="width: 100px;height: 100px;background: red;float: left;"></div>
</div>
  • BFC can prevent elements from being covered by floating elements

Here is a classic CSS layout test question (two-column adaptive layout) is the BFC feature of the application

  <div style="float:left; width:200px; background:blue">left</div>
  <div style="height:100%; background: red">right</div>

Trigger BFC

The following methods will trigger BFC (excerpted from MDN)

  • Root element or element containing the root element
  • Floating element (the float of the element is not none)
  • Absolutely positioned element (the position of the element is absolute or fixed)
  • Inline block element (the display of the element is inline-block)
  • Table cell (the display of the element is table-cell, HTML table cell defaults to this value)
  • Table caption (the display of the element is table-caption, and the HTML table caption defaults to this value)
  • Anonymous table cell element (the display of the element is table, table-row, table-row-group, table-header-group, table-footer-group (the default attributes of HTML table, row, tbody, thead, and tfoot respectively) Or inline-table)
  • Block elements whose overflow value is not visible
  • elements whose display value is flow-root
  • contain elements whose values ​​are layout, content, or strict
  • Flexible element (display is a direct child element of flex or inline-flex element)
  • Grid element (display is a direct child element of grid or inline-grid element)
  • Multi-column container (the column-count or column-width of the element is not auto, including the column-count is 1)
  • The element whose column-span is all will always create a new BFC, even if the element is not wrapped in a multi-column container

Summarize

Many students have no concept of BFC concept. I don’t know why we need to clear the float, overlap the margin and so on. After reading this article, I think I should have a rough idea.

Let’s review the characteristics of a BFC

  • The margins will collapse under the same BFC
  • BFC can prevent elements from being covered by floating elements
  • BFC can contain floating elements (clear floating)

Leave a Comment