CSS清除浮动的BFC方式

总结：浮动问题产生的原因是float成为了BFC区域，脱离了文档流。

一、何为BFC

       BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二、形成BFC的条件

      1、浮动元素，float 除 none 以外的值； 
      2、定位元素，position（absolute，fixed）； 
      3、display 为以下其中之一的值 inline-block，table-cell，table-caption； 
      4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

三、BFC的重要特性
      1.bfc的区域不会与float的元素区域重叠。
      2.计算bfc的高度时，浮动元素也参与计算

一、父子问题

有一个元素是float，成为了BFC区域，脱离了文档流，而父元素还在文档流里，计算高度的时候不会把BFC区域计算进去。所以浮动元素的子元素无法把父元素的div撑开。

解决方案是把父元素也变成BFC区域，这样就会把子元素的高度计算进去。

<div class="father">
    <div class="son">
    </div>
</div>

.father{
    overflow:hidden;
    width:800px;
    border:20px red;
}
.son{
    float:left;
    width:400px;
    height:200px;
    border:20px black;
}

二、兄弟问题

正常情况下，文档流里的元素会环绕着float的元素。有的时候，不希望有环绕效果。

<div class="fa">
	<div class="son">
	</div>
	<span>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好                    
    </span>
</div>

.fa{
	width:600px;
	overflow: hidden;
	border: 20px solid red;
}
.son{
    float:left;
    width:400px;
    height:100px;
    border:20px solid black;

}

为了使span不环绕着浮动元素，需要把span变成BFC区域，也就是在span中设置overflow:hidden，但是span是行内元素，BFC的前提是块级元素，所以还需要设置display:block。（如果是<p>这样的块级元素,就不用设置display）

.fa{
	width:600px;
	overflow: hidden;
	border: 20px solid red;
}
.son{
    float:left;
    width:400px;
    height:100px;
    border:20px solid black;

}
span{
	overflow: hidden;
	display: block;
}