1.在最后一个浮动标签后，新加一个标签，将其样式设置为 clear：both；
2.在父级元素添加样式 overflow:hidden; 此方法会将多出的内容裁切掉，无法显示要溢出的元素
3.使用before和after双伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image</title>
<style>
* {padding: 0;margin: 0;}
p{float: left;}
.clearfix::before,.clearfix::after {
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div style="border:1px solid green;" class="clearfix">
<p style="width:100px;height:100px;background:red;"></p>
<p style="width:100px;height:100px;background:red;"></p>
<p style="width:100px;height:100px;background:red;"></p>
</div>
</body>
</html>
