当我们用 float 的时候，会造成父级元素的塌陷，进而影响到我们的整体布局，因此，我们有时候需要清除浮动所带来的问题。有很多种清除浮动的方法，最简单粗暴的方法就是直接给塌陷的父级加高度，但是，这种方法对于需要从后台动态遍历数据的时候，这种“死”高度就会造成页面的乱版。所以，不建议使用。
最常用的方法之一就是利用伪类来清除浮动塌陷问题，只需要给塌陷的父类元素加上清除浮动的样式即可。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类清浮动</title>
<style type="text/css">
*{margin:0;padding:0;}
/*伪类清浮动*/
.clearfloat:after{display: block;content: "";clear: both;}
.box{border:1px solid red;}
.box ul{border:1px solid blue;}
.box ul li{float: left;margin-left:40px;list-style: none;}
</style>
</head>
<body>
<div class="box clearfloat">
<ul class="clearfloat">
<li>left</li>
<li>right</li>
</ul>
</div>
</body>
</html>
