What is BFC (Block formatting Context)
Formatting context (format context) is a concept in the CSS2.1 specification. It is a rendered area of the page and has a set of rendering rules that determine how its child elements will be positioned, and the relationships and interactions with other elements.
The Block formatting contexts (BFC, block-level formatting context) is a rendering rule for the blocks-level element. Elements with BFC attributes can be thought of as isolated containers in which the elements in the container do not affect the outer elements on the layout, and BFC have features that are not available in ordinary containers.
The layout rules for BFC are as follows:
1. The inner box will be placed in a vertical direction;
2. BFC is a separate, isolated container on the page;
3. The upper and lower margin of the two adjacent boxes belonging to the same BFC overlap;
4. When calculating the height of the BFC, floating elements are also involved in the calculation
5. The left side of each element touches the left side of the containing box, even if there is a float;
6. The BFC area does not overlap with float;
So how do you trigger BFC? The BFC feature is triggered whenever an element satisfies any of the following conditions:
Body root element;
Floating element: Float is not a property value of none;
Absolute positioning elements: position (absolute, fixed)
Display: Inline-block, Table-cells, Flex
Overflow values other than visible (hidden, auto, scroll)
What's the use of BFC?
The block formatting context is important for locating and clearing floats. The style rules for locating and clearing floats apply only to elements that are within the same block formatting context.
1, the same BFC under the outer margin will occur folding
In other words, the margin in the vertical direction of the block elements in the two adjacent normal streams collapses.
<STYLE>.P { width:200px; height:50px; margin:100px 0; background-color:red; } </style><body> <div class= "P" ></div> <div class= "P" ></div> </ Body>The margin for two p here is 100px, not 200px. The margin folds occur because they belong to the root element of the body .
Use BFC to eliminate margin Collapse
BFC caused the margin collapse, and now it's time to use it to settle the margin. Cllapse. But always remember that a margin in the vertical direction is clollpase only if the element is in the same BFC. If they belong to a different BFC, there will be no margin Collapse. So we can build another BFC to stop the margin collpase from happening.
<div class= "P" ></div> <div class= "wrap" > <div class= "P" ></div> </div > Wrap { overflow:hidden;}. p { width:200px; height:50px; margin:100px 0; background-color:red; }2. BFC can contain floating elements (clear float)
Normally, floating elements break out of the normal document stream, causing the parent element to collapse highly. That is, the outer p will not contain the internal floating p.
<div style= "border:1px solid #000;" > <div style= "width:50px; height:50px; background: #eee; float:left;" > </div></div>
But if we trigger the BFC of the outer container, according to 4th of the BFC specification: When the height of the BFC is calculated, the floating element is also involved in the calculation, then the outer p container can wrap the floating element.
<div style= "border:1px solid #000; Overflow:hidden" > <div style= "Width:100px;height:100px;background: #eee; float:left; " ></div></div>
3. BFC can prevent elements from being overwritten by floating elements/(two-column layout)
In most cases (without special settings), the second element is partially covered by a floating element (but the text information is not covered by a floating element ), and the text wraps around the floating element (Figure 1); but sometimes it's not what we expect, we want Figure2.
If you want to avoid an element being overwritten, you can touch the BFC attribute of the second element and add it to the second element. overflow: hidden
It is often possible for everyone margin-left to choose to force P's container to have a left margin, and the distance is exactly the width of floated p, but now we can use BFC to better solve the problem.
This method can be used to implement two-column adaptive layouts , the left-hand width fixed, and the right content adaptive width.
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
