赞赏作者
扫一扫支付
韶华小苑 |

时光不负终不老

您现在的位置是: 首页 >

清除浮动的五种方法

清除浮动的五种方法

作者:小美女 日期:2020-07-22 点击:8

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;
}

最后修改时间:2020-07-22 11:09:00

瞅我来气不?用红包砸死我吧