清除浮动大全

清除浮动的方法

方法一：

```css

需求允许的话，考虑给父盒子添加高度

```

方法二：

在所有浮动的盒子后面额外添加一个div标签，这个div标签不能有样式，也可以是p标签。

```html

<div style="clear: both;"></div>

```

方法三：

```css

给盒子父级盒子添加  overflow:hidden 属性

```

方法四：

使用after伪元素清除浮动，:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

使用方法：

```css

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }  

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

/* 最后给父盒子添加clearfix这个类 */

```

方法五：

使用双伪元素清除浮动

```css

.clearfix:before,.clearfix:after {

  content:"";

  display:table;

}

.clearfix:after {

 clear:both;

}

.clearfix {

  *zoom:1;

}

/* 最后给父盒子添加clearfix这个类 */

```