清除浮动的五种方法

1. 给父级元素定义高度

这个方法代码简单，但是仅适用于排版布局有固定高度的元素，否则的话就不太合适了

2. 给父级元素添加属性 overflow:hidden

这个方法使用需要看情况而定，有的元素内容太多会被隐藏掉，而且涉及到position定位会有引起麻烦

.father {
    overflow: hidden;
}

3. 额外加一个标签法

这个方法会造成代码冗余，多了很多不必要的无意义标签，在需要清除浮动的元素之后增加一个div标签，给他一个clear: both属性

<div class=demo></div>
<div class=clear></div>

.clear {
    clear: both;
}

4. 使用after伪元素清除浮动

这个方法推荐使用

.clearfix｛
    content: ;
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
｝

为了IE6，IE7的兼容性，需要添加

.clearfix {
    *zoom: 1;
}

5. 使用before和after伪元素清除附浮动

这个方法是最推荐的方法也是最常用的方法，给父级元素添加这些属性，符合闭合浮动思想，结构语义化正确

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

赞赏作者

扫一扫支付

 支付宝支付  微信支付