1.在后一个元素中使用clear:both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
border: solid 10px red;
}
.box1{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
这里相当于给box2清楚前面一个元素浮动对于它的影响,相当于给box2加了一个margin-top,从而使得box2位于box1的下方,撑开外边的盒子
2.after伪类解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.box3{
clear: left;
}
.box1::after{
/* after是在该元素内部的最后加一个伪元素 */
content: '';
clear: both;
/* 伪元素默认为行内元素,所以需要display:block */
display: block;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>