What is BFC
Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements. The most common Formatting contexts are Block fomatting context (BFC) and Inline Formatting context (IFC). Block formatting context. It is a separate rendering area, with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area. In layman’s terms, a BFC is a container for managing block-level elements.
How to create a BFC
- Float for left | right
- Overflow for hidden | auto | scroll
- The display table – cell | table – caption | inline – block | inline – flex | flex
- The position of absolute | fixed
- The root element
Iii. BFC layout rules:
- The internal boxes are placed vertically, one after the other (that is, block-level elements on a single row).
- The area of the BFC does not overlap with the float box (this allows for an adaptive two-column layout).
- The vertical distance of the inner Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap (there are three conditions for margin overlap: belonging to the same BFC; Adjacent; Block-level elements).
- When calculating the height of the BFC, floating elements are also involved. (Clear floating HasLayout)
- A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa.
What are the features of BFC
Feature 1: THE BFC prevents vertical margin folding
According to the definition of BFC, vertical margin overlap can occur only when two elements belong to the same BFC, which includes adjacent elements or nested elements. As long as there is no block between them (such as border, non-empty content, padding, etc.), margin overlap will occur.
① Margin overlap problem of adjacent sibling elements
<style>
p{
color: #fff;
background: # 888;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>ABC</p>
<p>abc</p>
</body>
Copy the code
Just wrap a container around p and trigger it to generate a BFC. Then the two P’s do not belong to the same BFC, and margin overlap will not occur
<style>
p{
color: #fff;
background: # 888;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
.wrap{
overflow:hidden;
}
</style>
<body>
<p>ABC</p>
<div class="wrap">
<p>abc</p>
</div>
</body>
Copy the code
② Margin overlap between father and son elements
<style>
.box{
width:100px;
height:100px;
background:#ccc;
}
.wrap {
background:yellow;
}
.wrap h1{
background:pink;
margin:40px;
}
</style>
<body>
<div class="box">box</div>
<div class="wrap">
<h1>h1</h1>
</div>
</body>
Copy the code
Feature 2: The BFC does not overlap floating elements
Using this feature, we can create adaptive two-column layouts.
<style>
.box1{
height: 100px;
width: 100px;
float: left;
background: lightblue;
}
.box2{width: 200px;
height: 200px;
background: #eee;
}
</style>
<body>
<div class="box1"> I am a left float element </div> <div class="box2"Word-wrap: break-word! Important; "> Don't get angry. Anger will make you angry. Wukong you are also too naughty, I told you to call you don't throw things, you how...... Look, you threw the stick away before I could finish! The moonlight box is a treasure, you throw it away will pollute the environment, if hit the children how to do, even if not hit the children, hit plants is wrong. </div> </body>Copy the code
Add overflow:hidden to the style of the.box2 element; Make it set up a BFC so that its content eliminates the impact of external floating elements
Feature 3: THE BFC can contain floats —- clear floats
We all know that floats leave the document stream, so let’s look at the following example:
<style>
.box1{
width:100px;
height:100px;
float:left;
border: 1px solid # 000;
}
.box2{
width:100px;
height:100px;
float:left;
border: 1px solid # 000;
}
.box{
background:yellow
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
Copy the code
Because the two div elements in the container float out of the document flow, the parent container has zero content width (i.e., a high collapse) and fails to wrap the child elements. To solve this problem, just turn the parent element into a BFC. A common approach is to set overflow: Hidden to the parent element.
This article was revised on October 14, 2018. I hope this article is of some help to youMy GitHub blogLike and follow, thank you!