CSS BFC深入学习

以下总结是参考这两篇文章：

1.理解CSS中BFC

2.前端精选文摘：BFC 神奇背后的原理

1、什么是BFC？

BFC全称为Block Formatting Context，翻译为“块级格式化上下文”。它是一个独立的渲染区域。只有block-level-box（块级别的盒子）参与。它规定内部的block-level-box如何布局，并且与这个区域外部毫不相干。它的定位体系属于常规文档流（normal flow）。

2、什么是Box?

Box是css布局的对象和基本单位。Html元素的类型和display的属性，决定了这个Box的类型。不同类型的Box，会以不同的Formatting Context（一个决定如何渲染文档的容器）方式来渲染区域。

3、Box、Formatting Context常见分类

（BFC）block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box，并且参与 block fomatting context；
（IFC）inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box，并且参与 inline formatting context；
Formatting Context常见分类为：block fomatting context和inline formatting context；

4、构成BFC需要的条件？

一个BFC就是一个HTML盒子，并且至少要满足下列条件中的一个。

float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

5、如何创建一个BFC？

如果想要创建一个新的BFC，只需要给它添加上面提到的任何一个css样式就可以了。

本例中，我们添加的之一条件是：overflow:hidden;代码如下所示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BFC</title>
 6     <style type="text/css">
 7         p{
 8             margin: 0px;
 9             padding: 0px;
10         }
11         .container{
12             background-color: red;
13             border: 5px solid #e5e5e5;
14             overflow: hidden;
15         }
16         .parm1,.parm2{
17             background-color: lightgreen;
18             margin:10px 0;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="container">
24         <p class="parm1">Sibling 1</p>
25         <p class="parm2">Sibling 2</p>
26     </div>
27 </div>
28 </body>
29 </html>

View Code

分析：<div class="container">：此div是一个包含块（containing block）。

<p class="parm1">Sibling 1</p>和<p class="parm2">Sibling 2</p>是两个兄弟子块。

以上代码显示的效果图如下：

由代码及显示的效果，我们可以很显明地发现，两个兄弟元素（p元素）之间的边距应该是两个元素之和20px;但是实际上显示的效果，却只有10px？为什么会这样呢？这两个兄弟元素（p元素），都处在同一个BFC中。这种现象叫做“外边距折叠”。“外边距折叠”的这种现象，是BFC导致的。当兄弟元素(p元素)外边距不一样时，将以最大的那个外边距为准。

6、如何解决BFC产生的外边距折叠？

我们必须牢记在心的是毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生。

如果他们属于不同的BFC，他们之间的外边距将不会折叠。所以通过创建一个新的BFC，可以防止外边距折叠。

以下是BFC产生“外边距折叠”的代码及效果图情况：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BFC</title>
 6     <style type="text/css">
 7         p{
 8             margin: 0px;
 9             padding: 0px;
10         }
11         .container{
12             background-color: red;
13             border: 5px solid #e5e5e5;
14             overflow: hidden;
15         }
16         .parm1,.parm2,.parm3{
17             background-color: lightgreen;
18             margin:10px 0;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="container">
24         <p class="parm1">Sibling 1</p>
25         <p class="parm2">Sibling 2</p>
26         <p class="parm3">Sibling 3</p>
27     </div>
28 </div>
29 </body>
30 </html>

View Code

由上图可知，产生的结果和上面的例子一致。三个兄弟元素(p元素)，以垂直的距离为10px的距离展开。会产生这样的原因，是因为三个兄弟（p元素）都属于同一个BFC。