小结自己对BFC的理解

一、BFC概念

BFC的全称是块格式化上下文（Block Formatting Context，BFC）

1. body 根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

这些只是常见的，当然还有很多别的。

二、举例应用

1. 父元素包住子元素

当子元素为float时会脱离文档流，通过触发BFC父元素包住浮动子元素，让浮动内容和周围的内容等高。

<div class="parent">
  <div class="son">子元素</div>
  <div>我是内容</div>
</div>
.parent{
  border:1px solid red;
  overflow: auto;/* 触发BFC */
}
.son{
  border:2px solid blue;
  width:300px;
  height:50px;
  float:left;
}

2. 相邻元素隔离
   当兄弟元素为float时会脱离文档流，和其他兄弟元素重叠。通过触发BFC将兄弟元素隔离开。

<div class="parent">
  <div class="son1">子元素</div>
  <div class="son2">我是内容</div>
</div>
.son1{
  border:1px solid blue;
  width:300px;
  height:50px;
  float:left;
}
.son2{
  border:3px solid black;
  height:50px;
  overflow: auto;/* 触发BFC */
}

三、奇技淫巧

使用display: flow-root

一个新的display属性的值，它可以创建无！副！作！用！的BFC。