谈谈对CSS中BFC的理解

1.对于CSS常见的问题有margin重叠和浮动的闭合问题。

（1）首先我们来看margin重叠现象

如果不存在margin重叠则，上下两个块元素的垂直边距应该为30px;

但是这里的实际结果为垂直边距为20px;

这就是常见的margin重叠现象，重叠的外边距取边距中的较大者，比如这里marigin-top

和margin-bottom，我们可以看出，边距未发生叠加，取到的知识边距中的较大者20px;

(2)浮动的闭合问题

当父元素宽度确定，高度自适应，子元素宽度高度确定，

此时如果仅仅浮动子元素，就会存在浮动的闭合问题，此时父元素无法完全闭合子元素

比如：

 

 

 

运行的结果为：

我们发现此时父元素无法闭合子元素，这就是常见的浮动的闭合问题

2.接下来介绍BFC模型，首先确定什么是BFC模型，

（1）BFC 定义

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它  .div1{
  width:200px;
  border:2px solid red;
  overflow: hidden;
  }
  .div2{
  width:100px;
  height:100px;
  background-color:blue;
  float:left;
}规定了

内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

（2）如何产生一个BFC模型

       简单来说BFC模型就是特殊属性下的盒式模型，我们可以通过在盒式模型的CSS中添加属性，使得一般的BOX模型变为BFC模型：（如何生成BFC模型）

    根元素

    float不为none的元素

    position为absolute或者relative的元素

    display为inline-block, table-cell, table-caption, flex, inline-flex的元素

    overflow不为visible的元素

 

（3）BFC模型有很多重要的规则，最重要的是：

BFC模型在计算元素高度的时候，浮动元素也参数于计算，总之BFC模型可以理解为页面上的

一个独立的元素，BFC内部元素与外部元素之间不会相互影响，反之也如此。

3.BFC模型用于解决margin重叠问题

对于上述margin重叠的例子，如果我们假设：

在div2类的属性中，增加一个新属性

float：left(也可以为其他属性，只要其构成BFC模型即可）

 

我们发现：margin-top和margin-bottom叠加后，显示的结果为：

我们发现此时的垂直高度的margin=margin-top+margin-bottom；

4.BFC模型用于闭合浮动

当BFC用于闭合浮动时，我们只要令父元素为一个BFC模型即可

简单来说即给父元素添加比如overflow:hidden等属性！

  .div1{
  width:200px;
  border:2px solid red;
  overflow: hidden;
  }
  .div2{
  width:100px;
  height:100px;
  background-color:blue;
  float:left;
}

我们发现仅仅是在父元素div1的后面增加了overflow:hidden属性使其构成BFC模型，

运行结果为：

发现父元素完美的闭合了浮动的子元素！~