CSS高度塌陷问题及解决方法
CSS高度塌陷问题及解决方法：https://blog.csdn.net/qq_45799465/article/details/122650376
触发条件
包含结构,所有的子元素浮动,且父元素没有设置高度,就会触发父元素高度塌陷。
例如：
解决方法一：
给父元素添加固定高度。
缺点:不适合高度自适应的布局。
代码：
<style>
*{
margin: 0;
padding: 0;
}
ul{
/* 给父元素设置固定的高度 */
height: 600px;
border: 5px solid red;
}
li{
list-style: none;
width: 300px;
height: 100px;
float: left;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
解决方法二：
给父元素添加overflow:hidden;
缺点:不适合和定位定出去的页面布局使用
代码：
<style>
*{
margin: 0;
padding: 0;
}
ul{
/* 给父元素设置overflow: hidden; */
overflow: hidden;
border: 5px solid red;
}
li{
list-style: none;
width: 300px;
height: 100px;
float: left;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
解决方法三：
给所有的浮动盒子最后添加一个空的标签,例如 div,且添加声明 clear:both;
缺点:多了很多空的标签,造成代码冗余。
代码：
<style>
*{
margin: 0;
padding: 0;
}
ul{
border: 5px solid red;
}
li{
list-style: none;
width: 300px;
height: 100px;
float: left;
border: 1px solid blue;
}
div{
/* 给所有浮动标签后添加div并设置属性clear: both; */
clear: both;
}
</style>
</head>
<body>
<ul>
<li></li>
<div></div>
<li></li>
<div></div>
<li></li>
<div></div>
<li></li>
<div></div>
<li></li>
<div></div>
<li></li>
<div></div>
</ul>
</body>
解决方法四：
万能清除浮动法。
给塌陷的父元素:after{content:"";display:block;clear:both; visibility:hidden;}
代码：
<style>
* {
margin: 0;
padding: 0;
}
ul {
border: 5px solid red;
}
/* 在ul以后添加 */
ul:after {
/* 添加内容 */
content: "";
/* 转块元素 */
display: block;
/* 清除浮动 */
clear: both;
visibility: hidden;
}
li {
list-style: none;
width: 300px;
height: 100px;
float: left;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
以上就是高度塌陷的常用解决方法啦，码字不易点个赞吧~~~
————————————————
版权声明：本文为CSDN博主「秦大峰」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45799465/article/details/122650376
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）