父元素高度塌陷的解决办法

最新推荐文章于 2024-02-03 16:05:20 发布

原创

最新推荐文章于 2024-02-03 16:05:20 发布 · 3.8k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css

当子元素浮动后，父元素可能会出现高度塌陷问题。为解决这个问题，可以采取如下方法：1) 给父元素设定固定高度；2) 在父元素上应用`overflow:hidden/auto/scroll`；3) 在浮动元素后面添加带有`clear:both`的空标签；4) 将父元素的`display`属性设为`table`；5) 使用伪元素`::after`结合`clear:both`。每种方法都有其适用场景和潜在副作用。

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

子元素浮动后不在占有原文档流的位置，如果父元素没有设置高度，就会引起父元素高度塌陷，解决的办法如下：
1：给父元素设置高度，如下图：
在这里插入图片描述
注：只适合高度固定的布局。
2：给父元素添加：overflow:hidden/auto/scroll都可以清除浮动，如下图：

注：内容增多时会造成不会自动换行，导致内容被隐藏，无法显示需要溢出的元素。
3：给浮动元素末尾添加空标签，给空标签添加clear:both，如下图：
在这里插入图片描述
注：会添加许多无意义的标签，增加结构负担，导致代码冗余。
4：给父元素添加display:table，如下图：

注：会改变父元素的元素类型。
5：伪元素清除法：::afte{content:"";display:block;clear: both;height:0;overflow: hidden;visibility: hidden;},如下图：