css浮动清除

CSS 布局的三种机制

普通流（标准流）、浮动和定位

浮动

漂浮在普通流的上面

（1）浮动元素会脱离标准流
（2）float属性会改变元素display属性,设置浮动属性，可以让 div 水平排列，并且没有间隙

两个div的显示：
设置inline-block: 可以水平显示，不过 div 之间有间隙
设置浮动属性，可以让 div 水平排列，并且没有间隙

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

清除浮动：

原因

父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后
父级盒子高度为0，就影响了下面的标准流盒子。

本质

主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

方法

（1）额外标签法（空标签法）

在浮动元素末尾添加一个空的标签例如<div style=”clear:both”>

缺点： 添加许多无意义的标签，结构化较差。

(2) 给父级添加： overflow属性

overflow为:hidden| auto| scroll;

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

(3) after伪元素

.clearfix:after {
	 content: "";
	  display: block; 
	  height:0; 
	  clear: both; 
	  visibility: hidden; 
  }
.clearfix {/* IE6、7 专有 */
     *zoom: 1;
} 

缺点：由于IE6-7不支持:after，兼容性问题

(4) 双伪元素

.clearfix:before,.clearfix:after {
	content:"";
	display:table;
} .
clearfix:after {
	clear:both;
} .
clearfix {
	*zoom:1;
}

缺点：由于IE6-7不支持:after，兼容性问题