Css 多种清除浮动的方法

发表于 | 分类于

在做前端界面开发的时候，难免会用到 css 的 float 属性。

用到浮动容易导致容器的高度为0，及导致后面的布局错乱，这时候就需要清除浮动。

方法1：

只能清除元素左右的浮动，元素容器的高度不无填充。

1
.element {clear:both;}

方法2:

使用伪元素清除。

1
.element:after {visibility: hidden;display: block;font-size: 0;content: "";clear: both;height: 0;}

方法3:

与方法2效果相同，但是使用更简洁。

1
2
3
4
5
.element {zoom: 1;}
.element:before,.element:after {content: ""; display: table;}
.element:after {clear: both;}
//或直接
.element:after {content: ""; display: table;clear: both;}