introduction:
This article is a summary of my understanding and the BFC, BFC take you uncover the veil. BFC you will know what is the condition of the formation of BFC, BFC-related properties, as well as his practical application.
First, what is BFC
BFC (Block Formatting Context) format context, the Web page CSS box model rendering mode, layout, means a separate rendering area or is an isolated separate containers.
Second, the formation conditions of the BFC
1, float, float value other than the none;
2, positioning elements, position (Absolute, Fixed);
. 3, wherein the display is one of the following values Block-inline, Cell-Table, Table-Caption;
. 4, except that overflow value other than visible (hidden, auto, scroll) ;
Three, BFC features
1. Box inside one after placed in a vertical direction.
2. The distance in the vertical direction is determined by margin
3.bfc region does not overlap with the float element area.
4. bfc calculating the height of the floating elements are also involved in the calculation
5.bfc is a separate container on the page, the sub-elements inside the container does not affect the outside elements.
See here is not a feeling of loving mind, I use the following examples to help understand understanding:
Fourth, the practice is the sole criterion for testing truth
(1) BFC in aligned boxes
The first characteristic is: inside Box (block element) placed one after the other in the vertical direction. (This characteristic do not tangle, even if not in the block-level BFC box also vertically aligned)
(2) folding margins
The second characteristic: the distance in the vertical direction is determined by margin
In the conventional flow of the document, the vertical distance between the two boxes brothers by their margins are determined, but not their sum and two margins, but whichever is greater.
html：
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
css：
.container {
overflow: hidden;
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
height: 20px;
margin: 10px 0;
background-color: green;
}
.box2 {
height: 20px;
margin: 20px 0;
background-color: green;
}
Here, I can see the door, the first sub-box has a margin (margin penetration problem does not occur); vertical distance between the two sub-box to 20px 30px instead, because the vertical margins will be folded, with a large pitch prevail.
Is there a way to get vertical margins do not fold it? The answer is: Yes. 5 of said Article Characteristics: bfc is a separate container on the page, the sub-elements inside the container does not affect the outside of the element, outside of the same elements will not affect the elements within the BFC. So let box1 box2 again or in another BFC on the line.
html：
<div class="container">
<div class="wrapper">
<div class="box1"></div>
</div>
<div class="box2"></div>
</div>
css：
.container {
overflow: hidden;
width: 100px;
height: 100px;
background-color: red;
}
.wrapper {
overflow: hidden;
}
.box1 {
height: 20px;
margin: 10px 0;
background-color: green;
}
.box2 {
height: 20px;
margin: 20px 0;
background-color: green;
}
(3) not covered by the floating element
In the usual two-column layout, for example.
Fixed width on the left and right does not wide, the width of the right adaptive, changes with the browser window size is changed.
html：
<div class="column"></div>
<div class="column"></div>
css：
.column:nth-of-type(1) {
float: left;
width: 200px;
height: 300px;
margin-right: 10px;
background-color: red;
}
.column:nth-of-type(2) {
overflow: hidden;/*创建bfc */
height: 300px;
background-color: purple;
}
There are three-column layout.
The left and right sides of fixed width, no intermediate width, the width of the intermediate adaptation, changes with changes in the size of the browser.
html：
<div class="contain">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
css：
.column:nth-of-type(1),
.column:nth-of-type(2) {
float: left;
width: 100px;
height: 300px;
background-color: green;
}
.column:nth-of-type(2) {
float: right;
}
.column:nth-of-type(3) {
overflow: hidden; /*创建bfc*/
height: 300px;
background-color: red;
}
也可以用来防止字体环绕：
众所周知，浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。
html：
<div class="left"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</p>
css：
（1）环绕
.left {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
p {
background-color: green;
/* overflow: hidden; */
}
(2) preventing the use of surround bfc
.left {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
p {
background-color: green;
overflow: hidden;
}
(4) BFC contains floating block
This is all too familiar in the use overflow: hidden to clear floating Well, because the floating height of the box can not hold a standard document flow in the parent box. This is not too much to explain, I believe we have long understood.
to sum up
I hope this article has shown you the relevant characteristics of the BFC and how they affect the visual elements positioned on the page. All examples demonstrate their use in actual cases, which should make them more clear.
If there is anything you would like to add, please leave a message in the comments, welcome to discuss.