Deep understanding of BFC (Block formatting context)
1. What is BFC
Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area in a page and has a set of rendering rules that determine how its child elements will be positioned, and how they will relate and interact with other elements. The most common Formatting contexts are Block fomatting context (BFC for short) and Inline formatting context (IFC for short). Block formatting context literally translates to "block-level formatting context". It is an independent rendering area, only the Block-level box participates, it specifies how the internal Block-level Box is laid out, and has nothing to do with the outside of this area . In layman's terms, a BFC is a container for managing block-level elements.
2. How to create a BFC
float is left|right
overflow is hidden|auto|scroll
display is table-cell|table-caption|inline-block|inline-flex|flex
position is absolute|fixed
root element
3. BFC layout rules:
- The inner Boxes will be placed vertically, one after the other (ie, block-level elements on a line of their own).
- The area of the BFC will not overlap with the float box ( this can be used to achieve 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 ( three conditions for margin overlap: both belong to the same BFC; adjacent; block-level elements ).
- When calculating the height of the BFC, floating elements also participate in the calculation. (clear floating haslayout)
- BFC is an isolated and independent container on the page, and the child elements inside the container will not affect the elements outside. And vice versa.
4. What are the characteristics of BFC
Feature 1: BFC prevents vertical margin collapsing
According to the definition of BFC, two elements may overlap with vertical margins only when they belong to the same BFC . This includes adjacent elements or nested elements, as long as there is no obstruction between them ( such as borders, non-empty content, padding, etc. ), margin overlap occurs.
① The problem of overlapping margins 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>
Adjacent sibling element margin overlap problem
In the above example, the distance between the two P elements should be 200px, but in fact it is only 100px, and the margin overlap occurs. How do we deal with this situation?
Just wrap a layer of container around p and trigger the container to generate a BFC. Then the two Ps do not belong to the same BFC, and there will be no margin overlap .
<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>
② The problem of overlapping parent and child element margins
<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>
In the above figure, there should be a 40px upper and lower margin value between the wrap element and the h1 element. However, in fact, there is no margin value between the parent and child elements. At the same time, the distance between the two div elements is 40px. How do we deal with this situation?
There are actually many ways to deal with it. **Add: overflow: hidden; or overflow: auto to the wrap element; make its parent element form a BFC; you can also add border: 1px solid; or padding: 1px; * *These can effectively solve the problem of overlapping parent and child element margins.
Feature 2: 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-floated element</div>
<div class="box2">Hey, hey, hey! Don't get angry, everyone will get angry. Goku, you are too naughty,
I told you not to throw things, why are you...Look, you threw away the stick before I finished talking!
The moonlight treasure box is a treasure. If you throw it away, it will pollute the environment.
It's not right to hit flowers and plants. </div>
</body>
In the image above, the text is arranged around the floated element, but here, this is clearly not what we want. At this point, we can add overflow:hidden to the style of the .box2 element; make it create a BFC, and let its content eliminate the impact on external floating elements .
This method can be used to implement two-column adaptive layout, and the effect is good. At this time, the width on the left is fixed, and the content on the right has an adaptive width. If we change the size of the text or the size of the left-floated element, the structure of the two-column layout remains unchanged!
Feature 3: BFC can contain float----clear float
We all know that floats get out of the document flow, so let's take a 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>
Because the two div elements in the container are floating and are out of the document flow, the content width of the parent container is zero (that is, the height collapse occurs), and the child element cannot be wrapped. To solve this problem, just turn the parent element into a BFC. A common approach is to set overflow:hidden to the parent element.