CSS解决高度坍塌
什么是高度坍塌
默认情况下当父元素不设置高度的时候父元素的高度是靠子元素撑大的，也就是说子元素有多高，父元素就有多高；但是当子元素加了浮动之后，子元素就脱离了文档流，这时候父元素就会发生高度坍塌现象。
先看没有高度坍塌的时候的样式：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>解决高度坍塌</title>
<style>
.box1 {
width: 500px;
border: 5px solid salmon;
}
.box2 {
width: 200px;
height: 200px;
background-color: slateblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行截图：
user1/20220503134315-20210404212352.png
再看有高度坍塌的时候的样式：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>解决高度坍塌</title>
<style>
.box1 {
width: 500px;
border: 5px solid salmon;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background-color: slateblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行截图：
user1/20220503134459-20210404212932.png
解决
解决高度坍塌的方法有很多种，但是吧！方法在精不在多，所以，我选择了最简单最常用的方法： 使用after伪元素解决：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>解决高度坍塌</title>
<style>
.box1 {
width: 500px;
border: 5px solid salmon;
}
.box2 {
float: left;
width: 200px;
height: 200px;
background-color: slateblue;
}
.box1::after{
/* 添加内容 */
content: '';
/* 将元素转为块级元素 */
display: block;
/* 清除两侧浮动 */
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-06-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录