10 minutes to understand BFC principle

first, the Common positioning scheme

Before we talk about BFC, let's take a look at common positioning scenarios, where the positioning scheme is the layout of the control elements, and there are three common scenarios:
Regular stream (normal flow)
In a normal stream, the elements are laid out in the first place in the HTML, in this process, the inline elements are arranged horizontally until the row is filled and then wrapped, and the block-level element is rendered as a complete new row, unless otherwise specified, all elements are by default normal flow positioning, it can also be said that The position of an element in a normal stream is determined by the position of the element in the HTML document. Float (float)
In a floating layout, the elements appear first in the position of the normal stream, and then offset as far as possible to the left or right according to the direction of the float, and the effect is similar to the text wrapping in typography. Absolute positioning (absolute positioning) in an absolutely positioned layout, the element is detached from the normal stream, so the absolute positioning element does not affect its sibling elements, and the exact position of the element is determined by the coordinates of the absolute location. Ii. The concept of BFC

formatting context (formatting contexts) is a concept in the CSS2.1 specification of the consortium. It is a rendering area in the page and has a set of rendering rules that determine how its child elements will be positioned, as well as the relationships and interactions with other elements.

So what is BFC?

BFC is the block formatting contexts (chunk-level format context), which belongs to the normal flow of the above positioning scheme.

Elements with BFC attributes can be viewed as isolated containers in which the elements inside the container do not affect the outside elements in the layout, and BFC have some features that are not in common containers.

In layman's terms, the BFC can be understood as a closed box, the elements inside the box in any case boil, will not affect the external.
third, Trigger BFC

The BFC attribute can be triggered as long as the element satisfies any of the following conditions: Body root element floating element: Float excluding None value absolute positioning element: position (absolute, fixed) display for Inline-block, Table-cel LS, flex overflow except visible value (hidden, auto, scroll) four, BFC characteristics and application

1. The outer margin under the same BFC will collapse

 
In effect, since two DIV elements are under the same BFC container (this refers to the BODY element), the bottom margin of the first div overlaps with the top margin of the second Div, so the two boxes are only 100px away, not 200px.

First of all, this is not a CSS bug, and we can understand that as a specification, you can place it in a different BFC container if you want to avoid the overlap of the outer margins.

<div class= "Container" >
    <p></p>
</div>
<div class= "container" >
    <p></p>
</div>
 
. container {
    Overflow:hidden
}
p {
    width:100px;
    height:100px;
    Background:lightblue;
    margin:100px;
}
 
At this point, the two-box margin becomes 200px.

2. BFC can contain floating elements (clear float)

As we all know, floating elements get out of the ordinary document stream and look at the following example

<div style= "border:1px solid #000;" >
    <div style= "Width:100px;height:100px;background: #eee; float:left;" ></div>
</div>
 
Because the elements in the container float, leaving the document flow, the container is left with a 2px margin height. If the BFC of the triggering container is made, the container will be wrapped with floating elements.

<div style= "border:1px solid #000 Overflow:hidden" >
    <div style= "Width:100px;height:100px;background: # Eee;float:left; " ></div>
</div>
 
Effect as shown:

3. BFC can prevent elements from being overwritten by floating elements

First look at a text wrapping effect:

<div style= "Height:100px;width:100px;float:left;background:lightblue" > I am a left-floating element </div>
<div Style= "width:200px; Height:200px;background: #eee "> I was a floating without setting, 
nor triggering BFC elements, width:200px; background: #eee; </div >
 
In fact, the second element is partially covered by floating elements (but the text information is not covered by floating elements) if you want to avoid the element being overwritten, you can touch the BFC attribute of the second element, add the Overflow:hidden in the second element, and it becomes:

 This method can be used to achieve a two-column adaptive layout, which works fine when the left side of the width is fixed and the right side of the content is adaptive to width (remove the width of the top right).