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

总结一下，使用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;}