利用 :after 伪类来实现清除浮动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{padding:0px;margin:0px;}
ul,li{list-style:none;}
.nav li{float:left;}
.test{height:100px;width:100px;background:orange;}
/* 重点是下面这代码 */
.nav:after{content:"";clear:both;height:0;display:block;}
</style>
<body>
<div class="nav">
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
</div>
<div class="test"></div>
</body>
</html>
来源：https://www.cnblogs.com/zion0707/p/3889345.html