您的位置：首页 > 其它

清除浮动最简单的两种方式

2018-02-14 19:09 267 查看

总结一下，使用float的话，需要清除浮动的两种简单方式：
1.通过伪元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动常用简单的两种方式</title>
<style>
.box>li{padding:20px 5px;background:orange;float: left;}
.box::before,.box::after{content:'';clear: both;display: table;*zoom:1;}
</style>
</head>
<body>
<div class="box"><li>测试1</li><li>测试2</li><li>测试3</li>
</div>
<li class="box1">123</li>
</body>
</html>
通过伪元素是自我感觉质量比较高的清除浮动的一种方式，因为不再向DOM中添加元素
其是通过sass和less开发中，清除浮动在重复性使用中会变得格外轻松：%clearfix{
*zoom:1;/*ie*/
&::after,&::before{
content: '';
display: table;
}
&::after{
clear: both;
}
}
.box7{
@extend %clearfix;
}编译后结果：.box7 {
*zoom: 1;
/*ie*/
}
.box7::after, .box7::before {
content: '';
display: table;
}
.box7::after {
clear: both;
}
上面这段代码如果没有接触sass的小伙伴可以直接忽略：）
2.通过标签
定义一个class标签： <div class="clearfix"></div>css部分需要添加：.clearfix{clear: both;*zoom: 1;display: table;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航