First, what is the BFC?
BFC（Block Formatting Context）
Box: The basic unit of CSS layouts
Box is the basic unit of the object and CSS layout, straight point of view, is that a page is composed by a number of Box. Type elements and display attributes, determines the type of the Box. Different types of Box, will be involved in different Formatting Context (a determine how to render the container document), so the elements inside the Box will be rendered in different ways.
block-level box: display attribute block, list-item, table elements generate block-level box. And participate block fomatting context;
inline-level box: display attribute inline, inline-block, inline-table of the elements, generates inline-level box. And participate in inline formatting context;
run-in box: css3 only in
Formatting Context
Formatting context is a conceptual W3C CSS2.1 specification. It is a rendering of the page area, and a set of rendering rules, which determines how it will be positioned child elements, and the relationships and interactions and other elements. The most common Formatting context there Block fomatting context (referred to BFC) and Inline formatting context (referred to as IFC).
CSS2.1 only BFC and IFC, CSS3 also increased the GFC and FFC.
** BFC defined **
BFC (Block formatting context) translated as "block level format context." It is an independent rendering area, only to participate in Block-level box, which specifies how the interior of the Block-level Box layout, and has nothing to do with the outside of this area.
BFC layout rules
Box will be inside the vertical direction, disposed one behind.
Box vertical distance is determined by the margin. Box of two adjacent belong to a margin of overlap occurs with BFC
Left margin box for each element, in contact with the left border box comprising a block (for left to right format, or vice versa). The same is true even if there are floating.
BFC region does not overlap with float box
Calculating the height of the BFC, the floating elements are also involved in the calculation
BFC is a separate container isolated on the page, inside the container does not affect child elements to the outside elements. And vice versa is also true.
Second, what elements will produce BFC?
The root element
float property is not none
position is absolute or fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow is not visible
Third, the principle and the role of BFC
1. Adaptive two-column layout
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>Results page:
The BFC Layout Rule 3:
the left margin box for each element, and the left border box comprising a contact block (for a left to right format, or vice versa). The same is true even if there are floating.
Thus, although the presence of the floating elements aslide, but it will still be left main contact block comprising the left.
Solution - The fourth layout rules BFC: BFC region does not overlap with float box. Therefore BFC can be generated by triggering main, to achieve adaptive two-column layout. When the trigger generating main BFC, the new BFC does not overlap with the floating aside. Therefore the width of the containing block, and the width aside automatically narrowed.
.main {
overflow: hidden;
}Results page:
2. Clear internal floating
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>Results page:
Resolved - BFC layout according to the rules of Article VI: When calculating the height of the BFC, the floating elements are also involved in the calculation. In order to achieve clear the internal floating, we can trigger the par generate BFC, then par when calculating the height of the floating element child inside of par will be involved in the calculation.
.par {
overflow: hidden;
}Results page:
3. prevent vertical overlap margin
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>In this case, the distance between the two p is 100px, transmitted margin overlap.
The BFC second layout rules:
distance in the vertical direction is determined by Box margin. Box of two adjacent belong to a margin of overlap occurs with BFC
Solution - may be wrapped on the outside layer of the container p, the container and trigger to generate a BFC. Then the two P will not belong to the same BFC, would not have happened margin overlap.
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>to sum up:
More than a few examples of embodies BFC layout rules Article:
BFC is a separate container isolated on the page, inside the container does not affect child elements to the outside elements. And vice versa is also true.