理解BFC

2017-12-16

什么是BFC

直译：块级格式化上下文 -> Block fomatting context = block-level box + Formatting Context
解释：BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部元素如何布局，并且与这个区域外部毫不相干。
BFC生成：CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC
1. 根元素
2. float的值不为none
3. overflow的值不为visible(一般为hidden)
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed
BFC的约束条件
1. 内部的Box会在垂直方向上一个接一个的放置
2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC在布局中的应用

防止margin重叠

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC</title>
  <style>
    p {
      color: blue;
      background: #fcc;
      width: 200px;
      line-height: 100px;
      text-align: center;
      margin: 100px;
    }
  </style>
</head>
<body>
<p>hahaha</p>
<p>hehehe</p>
</body>
</html>

现象：两个p之间的距离为100px，发送了margin重叠（塌陷）

解决：根据BFC布局规则第二条

Box垂直方向的距离由margin决定。属于同一个BFC(上例中是body根元素的BFC)的两个相邻Box的margin会发生重叠

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC</title>
  <style>
    p {
      color: blue;
      background: #fcc;
      width: 200px;
      line-height: 100px;
      text-align: center;
      margin: 100px;
    }
    .xxx{
      overflow: hidden;
    }
  </style>
</head>
<body>
<p>hahaha</p>
<div class="xxx"><p>hehehe</p></div>
</body>
</html>

结果：

清除内部浮动

代码：

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BFC清浮动原理</title>
  <style type="text/css">
    .par {
      border: 5px solid #fcc;
      width: 300px;
      /*overflow: hidden;*/
    }
    .child {
      border: 5px solid #fffb60;
      float: left;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
<div class="par">
  <div class="child"></div>
  <div class="child"></div>
</div>
</body>
</html>

现象：

解决：根据BFC布局规则第六条

计算BFC的高度时，浮动元素也参与计算

所以把par生成BFC，即把注释去掉

结果：

自适应多栏布局

代码：

   <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>

现象：

解决：根据BFC布局规则第四条

BFC的区域不会与float box重叠。

那就让main生成BFC，这个新的BFC将不在于aside重叠

1
2
3

.main {
   overflow: hidden;
}

结果：

自适应多栏布局

类似前者,直接上图

把中间元素生成BFC就可以了
总结

上面的例子都体现了

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

参考：史上最全面、最透彻的BFC原理剖析