CSS BFC (Block formatting Context)

BFC is a concept in the CSS 2.1 specification block formatting context is the abbreviation for the formatting contexts, which determines how the element locates its contents, as well as its relationships and interactions with other elements. simply speaking, it is an environment that provides an independent layout, elements in this environment should be initialization, that is, how elements should be laid out in this environment, and so on. If an element is created BFC, then BFC determines how its content is positioned, and how it relates to other elements and interacts with it.

Layouts in this environment that follow certain rules do not affect layouts in other environments. For example, floating elements can form BFC, and the elements inside the floating element are mainly affected by the floating element, and the two floating elements are not affected by each other. That is, if an element conforms to a condition that becomes BFC, the layout and positioning of elements within the element are not affected by the external elements (unless the inner box establishes a new BFC).

each BFC is subject to the same set of layout rules . The element's child elements are placed one after another. Their starting point in the vertical direction is the top of a containing block, and the vertical distance between the two adjacent elements depends on the ' margin ' attribute. The vertical margins of adjacent block-level elements in BFC are collapsed. Element, the left side of each child element touches the left of the containing block (for right-to-left formatting, right outer contact right), even if there is a float (although the content area of a child element is compressed by a float), unless the child element also creates a new BFC.

For example, the following example:

 #red, #yellow, #orange, #green {width:100px; height:100px; float             :left;};            #red {background -color:red;}            #yellow {background -color:yellow;}            #orange {background -color:orange;}            #green {background -color:green; width:100px; height:100px;} #div1 {border:3px solid #  000000  } # Div2 {border:3px solid blue;overflow:hidden;margin -top:200px}  

<div id= "C1" >
<div id= "Red" > My parent is not bfc</div>
<div id= "Yellow" > I am bfc</div>
</div>
<div id= "C2" >
<div id= "Orange" > My parent is bfc</div>
<div id= "Green" > My parent is bfc</div>
</div>

The result we get is:

In the above example, there are two div, each containing two floating div elements, but the first Div has a "height collapse", because the inner floating element is separated from the normal flow, so the div is equivalent to an empty label, without height and width, that is, the height is 0, and the upper and lower borders overlap. The second DIV uses Overflow:hidden to create the BFC, which can contain floating elements, so the height is displayed correctly and its border position is normal.

Floating elements of non-block-level boxes, absolute positioning elements and block-level containers (such as inline-blocks,table-cells and Table-captions), and block-level boxes with arbitrary values outside the visible overflow attribute, create a BFC. That is, when the element CSS property is set to one of the following, a BFC can be created:

The value of *float is not none.

The value of the *overflow is not visible.

The value of *display is Table-cell, table-caption, any of the inline-block.

The value of *position is not relative and static.

The main use of BFC is to clear floats and to implement multi-column layouts

CSS BFC (Block formatting Context)