What you never know about CSS locating rule BFC !!!!!, Cssbfc
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) is literally translated as "Block-level Formatting range"
1. It is a concept in W3C CSS 2.1 norms. It determines how an element locates its content and its relationship and interaction with other elements. When visual layout is involved, Block Formatting Context provides an environment where HTML elements are laid out according to certain rules. Elements in one environment do not affect the layout in other environments. For example, a floating element will form a BFC, and the child element inside the floating element is mainly affected by the floating element. The two floating elements do not affect each other. A bit similar to a BFC is an independent administrative unit. It can also be said that BFC is a scope of action. It can be understood as an independent container, and the layout of the box in the container is irrelevant to those outside the container.
2. another popular point is that the Box in a normal stream belongs to a formatting context. The type can be block or inline, but not both. In addition, Block boxes are formatted in block formatting context, while Inline boxes is formatted in inline formatting context. Any rendered element belongs to a box, and is either block or inline. Even text without any element package will belong to anonymous block boxes or inline boxes according to different situations. Therefore, the preceding description divides all elements into the corresponding formatting context.
DEMO1:
<! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body>
<Div class = "aside"> </div>
<Div class = "main"> </div>
</Body>
</Html>
The display effect can be seen that due to the fast float of the dark red, the file is not occupied, so it will float on the pink block.
Enable BFC:
<! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body>
<Div class = "aside"> </div>
<Div class = "main"> </div>
</Body>
</Html>
Overflow: hidden is added to non-floating elements, as shown in:
The two divs are no longer stacked together.
DEMO2: <! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body>
<Div class = "par">
<Div class = "child"> </div>
<Div class = "child"> </div>
</Div>
</Body>
</Html>
Display Effect: Due to the floating of the child node, the parent node is not supported because it is out of the parent node document.
Enable BFC: <! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body>
<Div class = "par">
<Div class = "child"> </div>
<Div class = "child"> </div>
</Div>
</Body>
</Html>
Shows the effect: overflowhidden is added to the parent node. In this case, the quilt node can be opened.
DEMO3:
<! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body>
<Div class = "container">
<Div class = "right"> right </div>
<Div class = "left"> left </div>
<Div class = "center"> center </div>
</Div>
</Html> the three divs are arranged in one row. Note that the width of the cener is not set to automatically open,
Very hanging!
However, note that the center must be placed at the end of the html Tag order to achieve this effect.
DEMO4:<! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<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>
</Html>
Display Effect: Although left div is placed in two c div, the child node is out of the document flow due to floating, so that the child node does not occupy space and is arranged in a row at the same time.
Enable BFC: <! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<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>
</Html>
Display Effect: When overflow: hidden is added to the c div, BFC is triggered. Therefore, the originally floating subnode does not exceed the C div to affect the nodes outside c, so it becomes two rows.
Conclusion: As you can see, this article explains how to use overflow to trigger BFC. In fact, there are other trigger Methods besides overflow, but we haven't encountered any problem before, the above code passes through IE7 ~ [Including IE7] and Google detection can be safely used
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
