CSS Learning Note 09 Simple comprehension BFC

1 <! DOCTYPE html> 2 .div2 {background-color: #EAFFD0; width:200px; height:100px;} 9         . div3 {background-color: #95E1D3; width:200px; he ight:100px;} Ten     </style>11 
As you can see, the order of the block-level elements is from top to bottom, even if the width of the row can hold more than one element, now add margins to DIV1 and div2
Originally div1 the bottom margin for the 50px,div2 of the top margin of 50px, according to the reason they should be the distance between 100px, but here is only 50px, this is because in a block-level typesetting in the context of the adjacent two block-level box between the vertical margin is folded, That is, in the CSS learning note 07 box model introduced in the margin merge, that how to solve the phenomenon of margin merger, this involves the following to introduce the BFC.
What is BFC
blocks formatting contexts is a block-level formatting context, which is a separate rendering area that only block-level box participates in, which specifies the internal block-level box (the Display property is block , List-item, the element of table), and is irrelevant to the outside of the area. Where formatting context is a container for deciding how to render documents, formatting context is a concept in the CSS2.1 specification. It is a rendered area of the page and has a set of rendering rules that determine how its child elements will be positioned, and the relationships and interactions with other elements. The most common formatting context has the Block fomatting context (BFC) and the inline formatting context (IFC). CSS2.1 only BFC and IFC, CSS3 also added GFC and FFC.
In layman's words, BFC is a separate box, and the layout of the stand-alone box is unaffected by the outside, and of course it does not affect the outside elements.
At the beginning of the document rendering, a BFC is automatically created to lay out the entire page, and the entire document is a BFC when no new BFC is created.
The rules of BFC
 
 

  
  
 
   
The inner box will be placed vertically, starting at the top, one by one (as shown in the example above)
 
   
In the same BFC, in two adjacent block-level elements, a vertical margin collapses
 
   
The left side of each element's margin box is in contact with the left side of the containing block border box (or vice versa for formatting from left to right), even if there is a float
 
   
The BFC area does not overlap with float box
 
   
BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements, and vice versa.
 
   
When calculating the height of the BFC, floating elements are also involved in the calculation
 
  
 
 
Trigger BFC
 
 

  
  
 
   
root element
 
   
The Float property is not none (for example: left | Right
 
   
The value of the overflow is not visible (for example: Hidden | Auto | Scroll
 
   
Display property value is Inline-block | Flex | Inline-flex | Table-cell | Table-caption
 
   
Position for absolute or fixed
 
  
 
 
Applying BFC to solve margin overlay problem
Or the above example, because the element of the page is in a standard flow, so this time the BODY element is a BFC, according to the rules
In the same BFC, in two adjacent block-level elements, a vertical margin collapses
Now set the Display:inline-block property to Div1
At this time because the DIV1 element triggered by the Display:inline-block BFC, at this time the DIV1 is an independent BFC, according to the rules
BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements, and vice versa.
So there is no margin overlap at this time.
Clear internal float
When all the child elements in a box in a standard flow are floating and do not set the height of the box, then the entire height of the box collapses, what do you mean, look at the following example
1 <! DOCTYPE html> 2 
The parent container is propped up by two sub-div and now adds a floating
At this time, the parent container becomes 2 coincident lines, that is, the height becomes 0, that is, the height of the collapse. According to the rules
When calculating the height of the BFC, floating elements are also involved in the calculation
This can trigger the parent to generate BFC, and when the parent is calculating the height, the floating element within the parent will also participate in the calculation
Layout
1 <! DOCTYPE html> 2 
According to the rules
The left side of each element's margin box is in contact with the left side of the containing block border box (or vice versa for formatting from left to right), even if there is a float
So even if left is set to float, the left side of right still touches the left side of the containing block (that is, body). Then we can follow the rules
The BFC area does not overlap with float box
Let right trigger to generate BFC so you don't overlap left
This creates a common two-column layout.
In short, remember a little BFC is a separate container on the page, the child elements inside the container will not affect the outside elements, the same, the outer elements will not affect the child elements inside the container.
CSS Learning Note 09 Simple comprehension BFC