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