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

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.

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.

• 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

• 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会发生折叠

##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就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

 1  2  3  4      5      6     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      6     11 
12 13     
14     
15 16 

根据规则

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此

所以即使left设置了左浮动，right的的左边依然会与包含块的左边（即body）相接触。接着我们可以根据规则

BFC的区域不会与float box重叠

让right触发产生BFC，这样right就不会与left重叠了

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

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

The above is the detailed content of What is BFC? A simple understanding of bfc. For more information, please follow other related articles on the PHP Chinese website!