CSS BFC Learning Notes

BFC, full name is block formatting context, block-level formatting context .
What is specific, can be understood as a feature of the page element, triggering the elements of BFC often produce some unexpected effects for beginners.
There are several ways to trigger BFC, which can trigger BFC if any of them are satisfied:

• Floating element (float any value except none)
• Absolute positioning element (position is absolute or fixed)
• Display is Inline-block or Table-cell or table-caption
• Overflow is a value other than visible (hidden, auto, or scroll)

So what are the characteristics of BFC, why to trigger BFC? Let's start with a few phenomena.

First, the outer margin merges

HTML with the following structure

<div>    <p>这是一个段落</p></div><div>    <p>这是一个段落</p></div>

CSS as follows

        Body{  margin: 0; }        Div{  background-color: #2595e5;         margin: tenpx 0 px; }        P{  background-color: #ff9900;         margin: tenpx 0 px; }

Produce effect:

Both the DIV and P are added to the top and bottom margins, but the result is that the upper and lower margins of the P tag do not take effect, and in the vertical direction, the div margin is only 10px instead of two 10px, because they create margin overlap.
In short, margin merging means that when two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.
How do you avoid this effect, which leads to the first feature of BFC:

Prevent and sub-element margins from collapsing

Add a Overflow:hidden attribute to the Div, which is the fourth condition that triggers BFC:

        div{            background-color: #2595e5;            margin: 10px 0 10px;            /*触发BFC*/            overflow: hidden;        }

Look at the effect again

This shows that the element that triggered the BFC, does not and its child elements occur margin collapse.

Second, a high degree of collapse

This is often the case when using float:

<divclass="outer">    <divclass="inner"></div></div>

Css:

        Body{  margin: 0; }        . Outer{  background-color: #2595e5;         Border: 1px solid #f00; }        . Inner{  background-color: #ff9900;             width: px;             height: px;         float: left; }

Effect:

It can be seen that the height of the outer is 0, and there is no internal floating inner, which is called a high collapse.
BFC will be able to solve this problem, which is the second feature of BFC:

Include floating elements

The same to outer plus overflow:

        .outer{            background-color: #2595e5;            border: 1px solid #f00;            /*触发BFC*/            overflow: hidden;        }

Produce effect:

Three, elements are covered by floating elements

This problem also occurs when there are floating elements:

<divclass="left"></div><divclass="right"></div>

Css:

        Body{  margin: 0; }        . Left{  width: px;             height: px;             background-color: #2595e5;         float: left; }        . Right{  background-color: #ff9900;             width: + px;         Height: + px; }

Produce effect:

As you can see, floating elements are overlaid on their neighboring elements, and solving this problem will lead to the third feature of BFC:

Prevent elements from being overwritten by floating elements

Add the Overflow property to right:

        .right{            background-color: #ff9900;            width: 100px;            height: 100px;            /*触发BFC*/            overflow: hidden;        }

Effect:

This feeling is the same as adding float:left to right, because using float:left also triggers BFC (the first condition)
Of course, this only occurs when the width of the two elements is not greater than the width of the parent element, otherwise right will wrap.

Summarize

To summarize, the elements that triggered the BFC will have the following characteristics:

1. Block and sub-element margins collapse
2. Include floating elements
3. Prevent elements from being overwritten by floating elements

The last thing to note is that IE7 the following browsers do not support BFC, but have their own unique haslayout, which is similar to BFC, but produces a lot of problems. One way to trigger Haslayout is to use zoom:1, so it's best to add zoom:1 when you use it to ensure compatibility.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

CSS BFC Learning Notes