想要实现如下效果时
输入如下代码
<!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>
.outer{
width: 330px;
background-color: pink;
}
.outer>.div1,.div2,.div3{
width: 100px;
height: 100px;
float: left;
margin-left: 10px;
}
.div1{
background-color: red;
}
.div2{
background-color: blue;
}
.div3{
background-color: black;
}
.bottom{
width: 120px;
height: 120px;
background-color: purple;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<div class="bottom"></div>
</body>
</html>
所得结果如下
并没有得到所需结果,出现该状况的原因是使用了float之后,div1,div2,div3脱离了默认文档流,导致其父元素无法获取到div1、div2、div3的高度,因而无法显示粉色。同时,脱离默认文档流后,div1、div2、div3相当于漂在空中,因而紫色的自动上移。
1、直接给父元素设置高度
.outer{
width: 330px;
height: 100px;
background-color: pink;
}
2、给父元素设置overflow:hidden;
.outer{
width: 330px;
background-color: pink;
overflow: hidden;
}
3、添加空标签,设置clear:both;
<body>
<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="center"></div>
</div>
<div class="bottom"></div>
</body>
.center{
clear: both;
}
4、使用伪元素标签::after
.outer::after{
content: "";
clear: both;
display: block;
}