Block formatting contexts (chunk-level formatting context)

Recently in the Learning bootstrap framework, found inside clear floating classes. Clearfix is not the same as usual. The style of it is this:

. clearfix:before{   content: "";   display:table;}. clearfix:after{   content: "";   display:table;   Clear:both;}

    By: befor and: After pseudo element clear float is familiar to me, but generally I use display:block rather than display:talbe. Found in the relevant data when the block formatting contexts (block-level formatting context) concept, has not touched before, after learning the CSS layout and have a deeper understanding of the need to record this key point of knowledge.

First, what is block formatting contexts?

BFC can be seen as a container in which the elements in this container are isolated from external elements, which means that the elements inside the container do not affect the outer elements. At the same time, BFC also has features not found in the normal container (block box), such as it can contain floating elements, without the problem of high collapse. BFC is part of the page flow.

Second, how to trigger block formatting contexts?

When you add any of the following styles to an element, the BFC is triggered, which means that the element is in a separate BFC container that is isolated from the other elements.

1. Float:left/right/inherit is a floating element other than none

2. position:absolute/fixed absolute positioning element, fixed is a subclass of absolute, also belongs to absolute positioning

3. Display:inline-block/table-cell/table-captions It is important to note that display:table itself cannot trigger BFC, but because table generates anonymous boxes, the display of anonymous boxes: The Table-cell feature triggers the BFC, resulting in a new formatting context.

4. Overflow:hidden/auto/scroll/inherit

Iii. What are the characteristics of Block formatting contexts? 1. Prevent margin folding

Normally, when two contiguous div blocks have margins, margins merge and collapse, and once an element triggers BFC, in a separate formatting context, its margins do not collapse with adjacent block-level elements.

Give me a chestnut:

<div style = "background: #F3C; margin:15px "><p style=" margin:15px ">div1 margin:15px</p></div><div style=" background: #FF3 ; margin:15px "><p style=" margin:15px ">div2 margin:15px</p></div><div style=" Overflow:hidden ; Background: #6F0; margin:15px "><p style=" margin:15px ">div3 margin:15px; Overflow:hidden</p></div>

It's the way it is:

The Div1, Div2, and Div3 in the diagram are in the same formatting context, so their margin 15px is folded, showing that the spacing for these three div blocks is 15px instead of 30px. Div1 and Div2 do not trigger BFC, so they are also in the same formatting context as their child <p>, so the margins of the <p> element are linked to the margins of their parent elements and are then folded. It is important to note that if you add a border to an external div, it is not valid with the outer margin of the child element p because the two margins are not joined together and separated by the border of the Div.

Div3 adds the Overflow:hidden style, triggering the BFC, so it creates a new formatting context within it so that its child element p is in the new formatting context, so its margin is not folded with the outer margin of the div3.

Block formatting contexts (chunk-level formatting context)