Css bfc Study Notes

Css bfc Study Notes

BFC, full nameBlock Formatting Context, Block-level Formatting up and downText.
What is specific? It can be understood as a feature of page elements. elements that trigger BFC often produce unexpected results for beginners.
The following methods can be used to trigger BFC:

Floating element (float value other than none) absolute positioning element (position is absolute or fixed) display is inline-block, table-cell, or table-caption overflow is a value other than visible (hidden, auto, or scroll)

What are the characteristics of BFC? Why does it trigger BFC? Let's start with several phenomena.

I. Merge outer margins

Html with the following structure

This is a paragraph

This is a paragraph

CSS is as follows

        body{            margin: 0;        }        div{            background-color: #2595e5;            margin: 10px 0 10px;        }        p{            background-color: #ff9900;            margin: 10px 0 10px;        }

Results:

The Code adds the upper and lower margins to both div and p, but the result shows that the upper and lower margins of p labels are not effective, and in the vertical direction, the margin of a div is only 10px, instead of two 10px, because they produce overlapping margins.
To put it simply, the padding merge refers to when twoVerticalWhen the outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.
How can we avoid this effect? This will lead to the first feature of BFC:

Blocks off-margin folding with child elements

Add the overflow: hidden attribute to the div to trigger the fourth condition of BFC:

Div {background-color: #2595e5; margin: 10px 0 10px;/* trigger BFC */overflow: hidden ;}

View results

It can be seen that the elements that trigger the BFC do not fold the outer margin with its child elements.

Ii. High collapse

This often happens when floating is used:

 

CSS:

        body{            margin: 0;        }        .outer{            background-color: #2595e5;            border: 1px solid #f00;        }        .inner{            background-color: #ff9900;            width: 50px;            height: 50px;            float: left;        }

Effect:

We can see that the outer height is 0, and it is not counted as the inner floating inside. This phenomenon is called the height collapse.
BFC will be able to solve this problem, which is the second feature of BFC:

Contains floating Elements

Add overflow to outer:

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

Results:

3. elements are overwritten by floating Elements

This problem also occurs when there are floating elements:

CSS:

        body{            margin: 0;        }        .left{            width: 50px;            height: 50px;            background-color: #2595e5;            float: left;        }        .right{            background-color: #ff9900;            width: 100px;            height: 100px;        }

Results:

We can see that the floating element covers its adjacent elements. Solving this problem will lead to the third feature of BFC:

Prevents elements from being overwritten by floating Elements

Add the overflow attribute to right:

. Right {background-color: # ff9900; width: 100px; height: 100px;/* trigger BFC */overflow: hidden ;}

Effect:

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

Summary

To sum up, elements that trigger the BFC will have the following features:

Block and child element margin fold include floating element prevent element from being overwritten by floating Element

It should be noted that the browser below IE7 does not support BFC, but has its own hasLayout. It is similar to BFC, but has many problems. One of the ways to trigger hasLayout is to use zoom: 1, so it is best to add zoom: 1 to ensure compatibility.