前端css 清除浮动的几种方式

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

清除浮动的几种方式

1. 父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。简单、代码少、容易掌握，但只适合高度固定的布局.

2. 结尾处加空div标签 clear：both

原理：在浮动元素的后面添加一个空div兄弟元素，利用css提高的clear：both清除浮动，让父级div能自动获取到高度，如果页面浮动布局多，就要增加很多空div，让人感觉很不好.

3. 父级div定义伪类：after 和 zoom /*清除浮动代码*/

.clearfix:after{

content：""；

display：block；

visibility：hidden；

height：0；

line-height：0；

clear：both；

}

.clearfix{zoom：1}

原理：IE8以上和非 IE 浏览器才支持：after，原理和方法2有点类似，zoom(IE 专有属性)可解决 ie6，ie7浮动问题， 推荐使用，建议定义公共类，以减少 CSS代码。

4. 父级div定义 overflow：hidden 超出盒子部分会被隐藏，不推荐使用.

5.双伪元素法：

.clearfix：before，.clearfix：after {

content： ""；

display： block；

clear： both；

}

.clearfix { zoom： 1；}