清除浮动的五种方法
清除浮动的五种方法
小美女 2020-07-22 暂无评论 技术,前端 41
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;
}
瞅我来气不?用红包砸死我吧

