<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
border: 20px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #bbb;
color: black;
font-size: 50px;
margin-left: 20px;
margin-bottom: 20px;
line-height: 100px;
text-align: center;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
</div>
</body>
</html>
显示效果如下图
由于方块元素产生了浮动流，所以外面的wrapper无法包裹里面的元素，如何做到清除浮动流，让wrapper包裹里面的元素呢，形成如下图形？下面介绍几种方法。
方法1：在content的最后一个元素后面添加一个块元素（p div ul li ol form address），块元素上添加clear。
不足：虽然能够满足要求，但是由于引入了新的元素（标签）破坏了整体的结构，所以不推荐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
border: 20px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #bbb;
color: black;
font-size: 50px;
margin-left: 20px;
margin-bottom: 20px;
line-height: 100px;
text-align: center;
}
p{
clear: both;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<p></p>
</div>
</body>
</html>
方法2：利用伪元素清除浮动流
思考：为什么不能利用content上的伪元素清除浮动流。
伪元素after是内容的最后部分，如果利用content伪元素after只能清除content内容的浮动流，无法清除content后的浮动流，所以没法达到目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
border: 20px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #bbb;
color: black;
font-size: 50px;
margin-left: 20px;
margin-bottom: 20px;
line-height: 100px;
text-align: center;
}
.wrapper::after{
content: "";
clear: both;
display: block;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
</div>
</body>
</html>
方法3：让wrapper触发BFC，触发BFC的方法有如下三种。
float：left/right
position:absolute;
display:inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
float: left;
/*position: absolute;*/
/*display: inline-block;*/
border: 20px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #bbb;
color: black;
font-size: 50px;
margin-left: 20px;
margin-bottom: 20px;
line-height: 100px;
text-align: center;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
</div>
</body>
</html>