目录

1. 何为BFC
2. 什么能产生BFC
3. 触发BFC的条件
4. BFC布局规则特性
5. BFC用途

       接下来我们将要学习一个非常重要的知识，这个知识对于布局来说非常非常的重要，可以说我们的布局潜移默化的都存在BFC。

1. 何为BFC
   
          对于我们的未来的网页布局来说，我们很希望这个范围就是做这件事的，那个范围就是做那件事的，两个范围之间并不互相冲突。那么BFC就是为了解决我们每个区域不互相冲突的而来的。
   
          BFC它是一个独立的渲染区域，它规定了这个区域内部如何布局，并且与这个区域的外部毫不相干。

1. 什么能产生BFC
   
          其实并不是所有元素都能产生BFC，一般来说，对于我们常用的只有display属性为block，list-item（也就是ul里面的li）table（表格）等元素，会产生BFC。
   
          这三个是用来布局的最为理想的元素，因为它们就是用来可视化布局的。
   
          总的来说，块级元素具有BFC，而行内元素不具有。

1. 触发BFC的条件
   
          （一）float不为none。
          （二）position为absolute或fixed。
          （三）display为inline-block，table-call，table-caption，flex，inline-flex，block、等。
          （四）overflow不为visible的。
   
          第四个一般为overflow:hidden。也是最常用的触发BFC的方式。

1. BFC布局规则特性
   
          （一）在BFC中，盒子从顶端开始一个一个地排列。
        4000    （二）盒子垂直方向的距离有margin规定，属于用一个BFC的两个相邻盒子的margin会发生重叠。
          （三）在BFC中，每一个盒子的左外边缘会触碰到容器的左边缘。
          （四）BFC区域不会与浮动的盒子产生交集，而是紧贴浮动边缘。
          （五）计算BFC高度的时候，自然也会检测到浮动盒子的高度。

1. BFC用途
   
          BFC主要应用于解决盒子外边距合并的问题，用到了第二条特性，其原理是给其中的一个子盒子加上BFC即可。还可以用到解决清除浮动问题，用到了第五条特性，只需要在父级添加overflow:hidden即可。还可以制作右侧自适应盒子的问题，主要用到了第四条特性。