BFC(块格式化上下文)的理解

1.什么是BFC(块格式化上下文)?

是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

 

2.什么时候会创建BFC?

• float的值不是none,浮动元素 float ＝ left | right 或 inherit（≠ none）

• position 的值不是static或者relative,绝对定位元素 position ＝ absolute 或 fixed

• display的值是inline-block,table-cell,flex,table-caption或者inline-flex

• overflow的值不是visible,overflow ＝ hidden | auto 或 scroll

3.BFC的特性？

　1.内部的box会在垂直方向，一个接一个地放置

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

　3.内部每个元素的margin box的左边，与包含块border box的左边相接触，浮动也是如此

　4.BFC的区域不会与float box重叠

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

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

4.BFC 的作用?

4.1.包含浮动元素（清除浮动）

浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为高度塌陷。

解决高度塌陷问题的前提是能够识别并包含浮动元素，也就是清除浮动。

解决方法：在容器（container）中创建 BFC。

 

4.2.防止垂直margin重叠

 

p {
     color: #f55;
     background: #fcc;
     width: 200px;
     line-height: 100px;
     text-align:center;
     margin: 100px;
}

<p>Haha</p>
<p>Hehe</p>

 

两个p标签是同一个BFC的内部box，内部相邻的box的margin发生重叠

  .wrap {
    overflow: hidden;
  }

  p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align: center;
    margin: 100px;
  }

　　<div class='wrap'>

　　　　<p>Haha</p>

　　</div>

　　<p>Hehe</p>