清楚浮动属性
第一种
.clearfix::after {
content: "";
clear: both;
display: block;
}
第二种
.parent {
overflow: hidden;
}
兼容性写法（主要是兼容IE浏览器）
.clearfix:after {
content: "";
clear: both;
display: block;
}
.clearfix {
zoom: 1;
}
整体代码与效果图
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.parent {
padding: 20px;
background-color: lightblue;
/* overflow: hidden; */
}
.item {
width: 100px;
height: 100px;
background-color: lightgreen;
float: left;
margin: 10px;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
来源：CSDN
作者：Mr .Xie Jun
链接：https://blog.csdn.net/weixin_43087225/article/details/103677126