CSS中解决父布局塌陷问题

最新推荐文章于 2024-10-11 13:38:20 发布

小白家的小黑

最新推荐文章于 2024-10-11 13:38:20 发布

阅读量783

点赞数 1

分类专栏： web 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_53521757/article/details/118397577

版权

当子元素浮动后，父元素高度塌陷。本文介绍六种解决方法，包括设置高度、overflow、clear属性、padding、after伪元素及双伪元素清除浮动，特别推荐使用before和after双伪元素作为终极解决方案。

摘要由CSDN通过智能技术生成

CSS中解决父布局塌陷问题

因为子元素浮动后，会脱离文档流。导致子元素无法撑起父元素的高度，造成父元素高度塌陷（父元素占据子元素原来的位置，此时父元素也没有设置高度，没有内容撑开父级高度）
起始状态

<style type="text/css">
			#div_01{
   
				background-color: antiquewhite;
			}
			#div_02{
   
				height: 100px;
				width: 100px;
				background-color: red;
			}
			#div_03{
   
				height: 100px;
				width: 100px;
				background-color: aqua;
			}
		</style>

<div id="div_01">
			<div id="div_02"></div>
			<div id="div_03"></div>
		</div>

在这里插入图片描述
子元素浮动后，造成父布局塌陷：

<style type="text/css">
			#div_01{
   
				background-color: antiquewhite;
			}
			#div_02{
   
				height: 100px;
				width: 100px;
				background-color: red;
			}
			#div_03{
   
				float: left;    
				height: 100px;
				width: 100px;