BFC(Block Formatting Context) 和清除浮动

最近听潭州课堂 ，里面有用overflow：hidden来清理浮动的方法。但是一直想不明白为什么能够实现清除浮动，查阅了网络上的解释，下面来总结一下。

一、首先来想想

我们大家理解的overflow:hidden是超出该元素的部分进行隐藏。这个时候就需要明确一点，该元素的高度是怎么定义的。当一个div中的两个元素浮动之后，此时div的高度就会塌陷，此时div的高度为0。那是不是意味着就要将浮动元素隐藏起来，如果是真的隐藏就是反布局常识的。所以这中间肯定有我们现在还不知道的机制。

二、不了解的机制-BFC

定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。

作用：独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

BFC的通俗理解：

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

 

三、使用

在浮动的父元素设置overflow: hidden; 或者清除浮动

<div class="list"> 

  <div class="items"></div>

  <div class="items"></div>

</div>

.list{

overflow: hidden;

 

}

.items{

float:left;

}

 

或者

.list:after{
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
        content: '';
    }