父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
border: 1px solid red;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>前提是它只包含浮动元素，解决高度塌陷的问题很简单，
可以
1.浮动父级元素、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
border: 1px solid red;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>2.使用clearfix清除法、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.box1{
border: 1px solid red;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>3.在浮动元素后加个div设置clear: both; height:0；overflow:hidden等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
border: 1px solid red;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.clear-box2{
clear: both;
height: 0;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear-box2"></div>
</div>
</body>
</html>版权声明：本文为q1054261752原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。