Related documents:
Http://blog.sina.com.cn/s/blog_877284510101jo5d.html
Http://www.cnblogs.com/dojo-lzz/p/3999013.html
Http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
BFC (block formatting cofsadntext) literal translation as "chunk-level formatting range"
1. is a concept in the CSS 2.1 specification that determines how elements are positioned on their content, as well as their relationships and interactions with other elements. When it comes to visual layouts, Block formatting context provides an environment in which HTML elements are laid out according to certain rules. The elements in one environment do not affect the layout in other environments. For example, floating elements can form BFC, and the elements inside the floating element are mainly affected by the floating element, and the two floating elements are not affected by each other. Here is a bit like a BFC is an independent administrative unit meaning. It can also be said that BFC is a scope of action. It can be understood as a separate container, and the layout of the box in the container is irrelevant to the outside of the container.
2. Another popular explanation is that the box in the normal flow is a formatting context (format), which can be either block or inline, but not both. Also, the block boxes (block box) is formatted in block formatting context (block formatting contexts), and the inline boxes (block inner box) is formatted in the inline formatting context (in-line formatting context) Of. Any rendered element belongs to a box, and not block, or inline. Even text that is not wrapped by any element, depending on the situation, will also belong to the anonymous block boxes or inline boxes. So the above description is to divide all the elements into the corresponding formatting context.
DEMO1:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<title>Examples</title>
<meta name= "description" content= "" >
<meta name= "keywords" content= "" >
<link href= "" rel= "stylesheet" >
<style>
Body {
width:300px;
position:relative;
}
. aside {
width:100px;
height:150px;
Float:right;
Background: #f66;
}
. Main {
height:200px;
Background: #fcc;
}
</style>
<body>
<div class= "aside" ></div>
<div class= "main" ></div>
</body>
The display effect is as follows: You can see that because of the dark red fast floating cause not to occupy the document position, so will float on the pink block
Open BFC:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<title>Examples</title>
<meta name= "description" content= "" >
<meta name= "keywords" content= "" >
<link href= "" rel= "stylesheet" >
<style>
Body {
width:300px;
position:relative;
}
. aside {
width:100px;
height:150px;
Float:right;
Background: #f66;
}
. Main {
height:200px;
Background: #fcc;
Overflow:hidden;
}
</style>
<body>
<div class= "aside" ></div>
<div class= "main" ></div>
</body>
Adding Overflow:hidden to the non-floating elements is shown in the following figure:
Two Div is no longer stacked together.
DEMO2: <! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<title>Examples</title>
<meta name= "description" content= "" >
<meta name= "keywords" content= "" >
<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>
The display looks like this: The parent section is not stretched because the child node's float causes the parent node to be detached from the document
Open BFC: <! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<title>Examples</title>
<meta name= "description" content= "" >
<meta name= "keywords" content= "" >
<style>
. par {
border:5px solid #fcc;
width:300px;
Overflow:hidden;;
}
. 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>
The effect is as shown in the following figure: adding Overflowhidden to the parent node allows the quilt node to open up
DEMO3:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<!--the viewport meta tag is used to improve the presentation and behavior of the samples
On IOS devices-->
<meta name= "viewport" content= "initial-scale=1, Maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
HTML, body {height:100%; width:100%; margin:0; padding:0;}
. left{
Background:pink;
Float:left;
width:180px;
height:200px;
}
. center{
Background:lightyellow;
Overflow:hidden;
height:200px;
}
. right{
Background:lightblue;
width:180px;
height:200px;
Float:right;
}
</style>
<body>
<div class= "Container" >
<div class= "right" >right</div>
<div class= "left" >left</div>
<div class= "center" >center</div>
</div>
very hanging. but note that the center must be placed in the order of the HTML tags to achieve this effect .
DEMO4:<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<!--the viewport meta tag is used to improve the presentation and behavior of the samples
On IOS devices-->
<meta name= "viewport" content= "initial-scale=1, Maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
HTML, body {height:100%; width:100%; margin:0; padding:0;}
. main{border:2px blue Solid;}
. left{
Background:pink;
Float:left;
width:180px;
height:200px;
}
</style>
<body>
<div class= "Main" >
<div class= "C" >
<div class= "left" >right</div>
<div class= "left" >left</div>
</div>
<div class= "C" >
<div class= "left" >right</div>
<div class= "left" >left</div>
</div>
</div>
The display effect is as shown in the figure: Although the left div is placed in two C Div respectively, the child nodes are arranged in a row because the floating causes the child nodes to break out of the document stream.
Open BFC: <! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<!--the viewport meta tag is used to improve the presentation and behavior of the samples
On IOS devices-->
<meta name= "viewport" content= "initial-scale=1, Maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
HTML, body {height:100%; width:100%; margin:0; padding:0;}
. main{border:2px blue Solid;}
. C{overflow:hidden;;}
. left{
Background:pink;
Float:left;
width:180px;
height:200px;
}
</style>
<body>
<div class= "Main" >
<div class= "C" >
<div class= "left" >right</div>
<div class= "left" >left</div>
</div>
<div class= "C" >
<div class= "left" >right</div>
<div class= "left" >left</div>
</div>
</div>
The display effect is as shown in the figure: when the Overflow:hidden is added to the C Div, it triggers the BFC so the original floating child node does not exceed the C div to affect the node outside of C, so it becomes two lines
The final summary: You can see this article throughout is to explain how to use overflow to trigger BFC, in fact, in addition to overflow outside there are other triggering methods, but temporarily did not meet the first not table, the above code through ie7~[including IE7] and Google's detection, you can rest assured that use
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
