关于css中父元素塌陷问题以及解决办法

最新推荐文章于 2025-04-01 17:34:17 发布

姑老爷呀

最新推荐文章于 2025-04-01 17:34:17 发布

阅读量915

点赞数

文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/pfourfire/article/details/128870288

版权

当子元素设置浮动后，会脱离文档流，导致父元素高度塌陷。解决方法包括使用伪元素`:after`添加清除属性，设置父元素的`overflow:hidden`触发BFC，或者使用`display:inline-block`，`float`或`position:absolute`。这些技术用于防止高度塌陷并优化布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是父元素塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷，即可能变成0了。

如下

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body><div class="parent"><div class="child">我是子元素</div></div></body>

<style scoped lang="scss"> .parent{ background-color: yellow;}.child{background-color: red;width: 200px;height: 200px;float: left;} </style>
</html>

没有设置浮动效果，可以看到父元素高度是200，是子元素的高度来定的

当给子元素设置浮动属性float后，如下，父元素已经没有高度了，因此背景颜色也看不到了。

解决方式

给父元素设置一个伪类，加上一些清除属性

 .parent:after{content:""; display:block; clear:both; }

这种方式比较方便，也影响最小。

浮动元素同级加上一个clear：left/right属性，浮动是哪边就写哪边。

这种方式相当于加上了一个空的div，不太合适，应该尽量避免这样的写法。

 .child2{clear: left;}

父元素加上 overflow:hidden;属性

这种相当于触发了BFC机制，只要不是visible都可以。

BFC可以理解为就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流。

display的值是inline-block、table-cell、flex、table-caption或者inline-flex都可创建成BFC

 .parent{ background-color: yellow; overflow: hidden;}

父元素加上`inline-block`触发BFC,或者同样加上一个浮动属性flaot，或者加上绝对定位属性，也可解决高度塌陷问题。

这种方式相当于父元素宽高完全取决于子元素了，会跟子元素一致。

 .parent{ background-color: yellow; /* overflow: hidden; */ /* display:inline-block; */ /* position:absolute; */ float: left;}

给父元素加上一个固定高度也可以解决

这种方式相当于有了一个高度限制了，对元素不是更好的发挥了。

 .parent{ background-color: yellow; min-height: 100px;}

总结

主要记录下经典的父元素塌陷问题，在开发过程中如果碰到相关问题，可以联想到这几种解决办法，更好的去优化代码。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享