BFC

BFC是Web页面中盒模型布局的CSS渲染模式

一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个：

• float的值不为none;
• position的值不为static或relative;
• overflow的值不为visible;

产生的问题：

• float:left 会把元素置于容器左边，其他元素环绕；
• overflow:hidden 会把溢出的内容剪切；
• overflow:scroll 会多出不必要的滚动条；

所以在选择显式创建BFC的时候，根据具体情况选上述择相应属性。

BFC导致的外边距折叠

在常规文档流中，两个兄弟盒子之间的垂直距离是由他们个体的外边距的中最大值所决定的，但不是他们的两个外边距之和。

<div class="container">
  <p>1</p>
  <p>2</p>
</div>

.container{
  overflow:hidden;
}
p{
  margin:10px 0;
}

理论上两个兄弟元素之间的距离应该是两个元素的变距之和（20px），但他实际上为10px，即外边距折叠。实际上将以最大的那个外边距为准。

解决外边距折叠

需要注意的是：相邻盒子的垂直外边距折叠只有他们是在同一个BFC时才会发生。

即，如果他们不属于同一个BFC，他们之间的外边距将不会折叠，所以我们可以通过创建一个新的BFC，来防止外边距折叠。

<div class="container">
  <p>1</p>
  <p>2</p>
  <div class="newBFC>
      <p>3</p>
  </div>
</div>

.container{
  overflow:hidden;
}
p{
  margin:10px 0;
}
.newBFC{
  overflow:hidden;
}

使用BFC来包含浮动

一个BFC可以有包含浮动。经常遇见这种情况，一个容器里有浮动元素，由于这个原因，容器元素没有高度，它的浮动元素将会脱离页面的常规流。可以通过清除浮动来解决这个问题，比如使用一个clearfix的伪类元素。但同时也可以通过定义一个BFC来达到这个目的。

<div class="container">
    <div>sibling1</div>
    <div>sibling2</div>
</div>

.container{
  background-color:green;
}
.container div{
  float:left;
  background-color:pink;
  margin:10px;
}

此时父容器不会有高度，将不会包含浮动元素。

通过添加overflow:hidden，在容器中创建一个BFC。

.container{
  overflow:hidden;
  background-color:green;
}
.container div{
  float:left;
  background-color:pink;
  margin:10px;
}

现在，这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，在这个BFC，这些元素将会回到页面的常规文档流。

使用BFC来防止文字环绕

比如想实现一个图片浮动在左边，文字在图片右边，而不环绕。

<div class="container"> 
    <div class="floated">Floated div</div> 
    <p>Quae hic ut ab perferendis sit quod architecto,dolor debitis     quam rem provident aspernatur tempora expedita.</p> 
</div>

这个p元素并没有移动，但是它却出现在浮动元素的下方。p元素的line boxes（指的是文本行）进行了移位。此处line boxes的水平收缩为浮动元素提供了空间。

随着文字的增加，因为line boxes不再需要移位,最终将会环绕在浮动元素的下方

如果这个p元素创建了一个新的BFC,那么它将不会紧挨着容器块的左边缘。这个可以通过简单的给p元素添加overflow: hidden来实现。这个方法创建了一个新的BFC解决了文字环绕在浮动元素周围的问题。