效果示例图
![在这里插入图片描述](https://img-blog.csdnimg.cn/38e69bc6fea74720a47bcd032a5d96dd.png#pic_center)
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动元素造成的高度坍塌</title>
<style type="text/css">
.container-noclear {
border: 1px solid red;
width: 500px;
margin: 50px auto;
}
.container {
border: 1px solid red;
width: 500px;
margin: 50px auto;
}
.container::after {
content: "";
clear: both;
display: block;
}
.items {
border: 1px solid #00a2ef;
width: 100px;
height: 100px;
margin: 11px 11px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
</div>
<div class="container-noclear">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
</div>
</body>
</html>
伪元素