css之BFC总结

一 BFC概念：

    BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。（它的定位体系属于常规文档流。怎么理解这句话）；

二 如何创建一个BFC：

   1 float的值不为none；
   2 position的值不为static或者relative；
   3 display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个；
   4 overflow的值不为visible；

三 BFC的特性：

   1 在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。
       两个相邻的块级盒子的垂直外边距会发生叠加。
       简言之 内部的Box会在垂直方向，从顶部开始一个接一个地放置。

   2 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

   3 在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），
      即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
      每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

   4 BFC的区域不会与float box叠加。

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

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

四 在实际的应用中如何利用BFC的上述特性
    
   1 解决margin叠加问题 三P每个p之间的距离为50px，发生了外边距叠加。 要解决这个叠加问题即让每个P之间是100px，我们可以新建一个BFC，

      怎么建呢？可以给p元素添    加一个父元素，让它触发BFC。
    
   2 用于布局
      从图中我们会发现上面BFC的第三个特性，就是元素的左外边距会触碰到包含块容器的做外边框，就算存在浮动也会如此。那么我们如何解决这个问题呢？

      看上面BFC第四个特性，就是BFC不会与浮动盒子叠加，

       那么我们是不是可以创建一个新的BFC来解决这个问题呢？来看看：发现我们用overflow:hidden触发main元素的BFC之后，效果立马出现了,一个两栏布局就这么妥妥的搞掂…

   3  用于清除浮动，计算BFC高度.