BFC概念及其作用

CSS盒模型

了解BFC前先说下css盒模型，CSS盒模型的基本概念: 盒模型分为W3C盒模型和IE盒模型,他们的区别是计算width和height的方式不同,IE盒模型的width是从border开始计算的。

如何设置CSS盒模型的类型 : 通过CSS3的 box-sizing:border-box就可以设置为IE盒模型了,默认是W3C盒模型

BFC基本概念

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式，即BFC就是一种css盒模型的渲染规则。
翻译为"块级格式化上下文"。

BFC渲染规则

在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。 在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也参与计算。

触发BFC

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

作用

一、margin堆叠

先看一段代码

	

        

        

    
    .container {
        overflow: hidden;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    
    .box1 {
        height: 20px;
        margin: 10px 0;
        background-color: green;
    }
    
    .box2 {
        height: 20px;
        margin: 20px 0;
        background-color: green;
    }

在这里两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。如果想要结果是两个外边距之和，让一个子元素触发BFC，元素变为独立的容器，就可以做到了。

二、文字环绕

先看一段代码

    

    	你好我好大家好才是真的好你好我好大家好才是真的好
    	你好我好大家好才是真的好你好我好大家好才是真的好
    	你好我好大家好才是真的好你好我好大家好才是真的好
    	你好我好大家好才是真的好你好我好大家好才是真的好
    
    .left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    
    p {
        background-color: green;
        /* overflow: hidden; */  /* 点开注释，文字就不环绕了 */
    }

解释：
浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间，可以看出float的脱离文档流不是完全脱离，

浮动的盒子会堆叠在没有触发BFC的盒子的上方，但文字会环绕浮动的盒子，所以就出现了文字环绕。

BFC的区域不会与float box叠加，让有文字的元素触发BFC，不叠加就可以解决问题了

（提一下小知识点：
1.包裹性
所谓的包裹性是指，使用float的元素会自动加上一个块级框，也就是可以像块级元素那样设置宽高
2.破坏性
float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素
）

三、清除浮动

出现高度塌陷的原因：
当子元素都设置浮动后，子元素会自动脱离文档流，此时父元素会默认自己里面没有任何内容，所以就出现高度塌陷了

清除浮动的方法（还要很多其他不常用的方法）
1、利用bfc原理包容浮动（当父元素触发BFC后，计算高度是会计算浮动的子元素的高度的）
2、利用clear属性清除浮动

下面详细点说下利用clear属性清除浮动：

/*利用添加空标签清除浮动
通过after伪类清除元素
现在比较流行的bootstrap框架或者其他各大框架中，
通常使用一下代码来清除：*/
      .clearfix:before,
      .clearfix:after
      {
          display: table;
          content: " ";
      }
      .clearfix:after
      {
          clear: both;
      }
      .clearfix{zoom:1;} /* ie 6 7 */
      
/*至于before和after中的display:table;
是为了防止子元素垂直方向上的边距折叠*/

解释：
clear 指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。注意：如果一个元素里只有浮动元素，那它的高度会是0，即高度塌陷。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。
值为both的意思是元素被向下移动用于清除之前的左右浮动。如果值为left，意思就是元素被向下移动用于清除之前的左浮动。（提示：float: left; float: right;)

可以这样理解，我们之所以能够使用clear解决float引起的父元素塌陷问题，其实就是因为加了clear的空标签或者是伪类元素，把top值设置在了浮动元素的bottom边缘下方，从而能够撑起父元素。

关于clear更详细的解释可以到MDN中查看，如果你还不是很理解，认真看下肯定会有不错的感悟

	**扩展**

IFC

行内格式化上下文

GFC

GFC(GridLayout Formatting Contexts)意为“网格布局格式化上下文”当一个元素设置为display:grid的时候，此元素将获得一个独立的渲染区域，可以在网格容器上定义网格行和列，为每一个网格定义位置和空间。GFC和table的区别在于GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染。（尽量不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间）

FFC

FFC(Flex Formatting Contexts)意为“自适应格式化上下文”,display值为flex或者inline-flex的元素将会生成自适应容器，当前只有谷歌和火狐支持该属性，不过在移动端几乎没有障碍(移动端是chrome和Safari的天下)。flex box由伸缩容器和伸缩子元素组成。通过设置元素display:flex/inline-flex可以得到伸缩容器，前者为块级元素，后者为行内元素。伸缩容器外元素不受影响。

非常感谢您的查看，希望这篇文章能够帮助到你。有疑惑的地方可自行查阅更多资料，这样更有利于您系统掌握知识，加油！

文章有错漏的地方，鼓励大家在评论里指出，这样更多的阅读者就能避开这些误区啦！