In-depth understanding of BFC and Margin Merge (Margin Collapse), bfccollapse
1. What is BFC? 1. Concept of BFC
The full name of BFC is Block Formatting Context, which translates into Block-level Formatting Context and Block-level Formatting range ". It is a concept in the W3C CSS 2.1 standard. It determines how an element locates its content and the relationship and interaction with other elements. In layman's terms, it is inside a div. We use float and margin to layout elements.
2. BFC layout rule 2. How to generate BFC? Iii. functions and principles of BFC
1. Adaptive Layout
<Style> body {width: 300px; position: relative ;}. aside {width: 100px; height: 150px; float: left; background: # f66 ;}. main {height: 200px; background: # fcc ;} </style> <body> <div class = "aside"> </div> <div class = "main"> </div> </body>View Code
AccordingBFC
3rd layout rules:
The left side of the margin box of each element is in contact with the left side of the border box containing the block (for formatting from left to right, otherwise the opposite is true ). This is true even if floating occurs.
Therefore, although the floating element aslide exists, the left side of main is still in contact with the left side of the contained block.
AccordingBFC
Article 4 of layout rules:
BFC
Does not matchfloat box
Overlap.
We can generateBFC
To achieve adaptive two-column layout.
When the main generation is triggeredBFC
After, this newBFC
Does not overlap with floating aside. Therefore, it is automatically narrowed according to the width of the included block and the width of the aside. The effect is as follows:
2. Clear internal floating
<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>View Code
Page effect:
AccordingBFC
Article 6 of layout rules:
ComputingBFC
The floating element is also involved in the calculation.
To clear the internal floating point, we can trigger the par generation.BFC
In this case, when the height of a par is calculated, the floating element child in the par is also involved in the calculation.
Code:
. Par {overflow: hidden ;}
The effect is as follows:
3. prevent Vertical margin overlaps <style> p {color: # f55; background: # fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px ;} </style> <body> <p> Haha </p> <p> Hehe </p> </body>View Code
Page effect:
The distance between two p is PX, and a margin overlap is sent.
The second rule is as follows:
Box
The vertical distance is determined by margin. Belong to the sameBFC
Two AdjacentBox
The margin of will overlap.
We can wrap a layer of containers outside p and trigger this container to generateBFC
. Then the two P do not belong to the sameBFC
.
Code:
<Style>. wrap {overflow: hidden;} p {color: # f55; background: # fcc; width: 200px; line-height: 100px; text-align: center; margin: 100px ;} </style> <body> <p> Haha </p> <div class = "wrap"> <p> Hehe </p> </div> </body>View Code
The effect is as follows:
Iv. Summary
BFC
Is an isolated independent container on the page. The child elements in the container do not affect the external elements. And vice versa.
BecauseBFC
The internal and external elements will never affect each other. Therefore, whenBFC
When there is a floating outside, it should not be affectedBFC
Internal Box layout,BFC
It will narrow down without overlap with the floating. Similarly, whenBFC
When there is a floating inside, in order not to affect the layout of external elements,BFC
The calculated height includes a floating height. This is also the case for avoiding the overlap of margin.
Excerpted from:
Http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
References:
Http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
Http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
Http://cssor.com/css-bfc-block-formatting-context.html
Http://www.haorooms.com/post/css_BFC_bgdiv
Http://caibaojian.com/bfc.html