What is BFC? A simple understanding of bfc-HTML Tutorial-php.cn

Introduction Before talking about BFC, let’s take a look at an example

1 2 3 4 5 BFC 6 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;} 8 .div2 {background-color: #EAFFD0; width: 200px; height: 100px;} 9 .div3 {background-color: #95E1D3; width: 200px; height: 100px;}10 11 12 13 14 div1 15 div2 16 div3 17 18

As you can see, block-level elements The order of arrangement is from top to bottom. Even if the width of the row can accommodate multiple elements, now add margins to div1 and div2 at the same time

##Originally, the bottom margin of div1 is 50px, and the top margin of div2 is 50px. Logically, the distance between them should be 100px, but here it is only 50px. This is because they are adjacent in a block-level layout context. The vertical margin between the two block-level boxes is folded, which is the margin merging introduced in CSS Study Notes 07 Box Model , so how to solve this kind of outer margin As for the phenomenon of distance merging, this involves the BFC to be introduced below.

What is BFC Block Formatting Contexts is a block-level formatting context. It is an independent rendering area , only Block-level box Participation, it specifies how the internal Block-level Box (element with display attributes of block, list-item, table) is laid out, and has nothing to do with the outside of this area. Among them, Formatting Context is a container that determines how to render the document. Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area on the page and has a set of rendering rules that determine how its sub-elements will be positioned, as well as their relationship and interaction with other elements. The most common Formatting contexts are Block fomatting context (BFC) and Inline formatting context (IFC). There are only BFC and IFC in CSS2.1, and GFC and FFC are also added in CSS3.

In layman's terms, BFC is an independent box, and the layout in this independent box is not affected by the outside. Of course, it will not affect external elements.

When the document presentation starts, a BFC will be automatically created to lay out the entire page. When a new BFC is not created, the entire document will be this BFC.

Rules of BFC The internal boxes will be placed one after another in the vertical direction, starting from the top (as can be seen in the above example)

In the same BFC, in two adjacent block-level elements, the vertical margin will collapse

The left side of the margin box of each element, and The left sides of the containing block border box touch (for left-to-right formatting, otherwise the opposite), even if there are floats

The area of BFC will not overlap with the float box

BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the elements outside and vice versa

Calculation When the height of BFC is calculated, floating elements also participate in the calculation

Trigger BFC Root element

The float attribute is not none (such as: left | right)

The value of overflow is not visible (such as: hidden | auto | scroll)

display attribute value is inline-block | flex | inline-flex | table-cell | table-caption

##position is absolute or fixed

Apply BFC Solve the margin overlay problem It’s still the above example, because the elements of the page are in a standard flow at this time, so the body element is a BFC at this time, according to the rules

同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠 Now set the display:inline-block attribute to div1

##At this time, due to div1 The element triggers BFC through display:inline-block. At this time, div1 is an independent BFC. According to the rules

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

, there will be no margin overlap at this time. Clear internal floats

When all the child elements in a box in a standard flow are floated, and the height is not set for the box, then the entire height of the box will collapse. What does it mean, look at the example below 1 2 3 4 5 BFC清除内部浮动 6 7 .child {background-color: #95E1D3; border: 1px solid #FCE38A; width: 100px; height: 100px;} 8 .parent {width: 300px; border: 1px solid #95E1D3;} 9 10 11 12 13 14 15 16 17

The parent container is supported by two child divs, now add a float to the child

#At this time, the parent container has become two overlapping lines, that is, the height has become 0, which is the so-called height collapse. According to the rules

计算BFC的高度时，浮动元素也参与计算

这时候可以触发parent生成BFC，那么parent在计算高度时，parent内部的浮动元素child也会参与计算

布局 1 2 3 4 5 BFC布局 6 7 .left {width: 100px; height: 100px; background-color: #FCE38A; float: left;} 8 .right {width: 300px; height: 150px; background-color: #95E1D3;} 9 10 11 12 13 14 15 16

根据规则

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此 所以即使left设置了左浮动，right的的左边依然会与包含块的左边（即body）相接触。接着我们可以根据规则

BFC的区域不会与float box重叠 让right触发产生BFC，这样right就不会与left重叠了

这样就形成了常见的两列布局。

总之记住一点BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，同样的，外面的元素也不会影响到容器里面的子元素。