一个新名词之CSS高度塌陷

• CSS高度塌陷
  • 解决CSS高度塌陷的方法

CSS高度塌陷

CSS高度塌陷是指在网页布局中，父元素没有正确地根据其浮动子元素的高度进行扩展，从而表现为父元素的高度未能包裹住浮动子元素的现象。

通常表现为父元素高度变为0，或者比实际应该表现的高度要矮。这个问题主要发生在以下情况：

1. 当子元素设置为浮动（float: left 或 float: right）时，它们会脱离正常的文档流，不再影响父元素的高度计算。

2. 父元素本身没有明确设置固定的高度，而是期望根据其内容（即子元素）自适应高度。

解决CSS高度塌陷的方法

1. 清除浮动（Clearfix）：

   • 使用伪元素清除浮动（.clearfix 类样式）：

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

   • 或者直接在父元素下方添加一个空的、clear属性设置为both的元素。

2. 设置 overflow 属性：

   • 为父元素设置 overflow 属性为 auto 或 hidden 可以创建一个新的块格式化上下文（Block Formatting Context, BFC），这使得父元素能够包容其浮动子元素的高度。

     .parent {
         overflow: auto; /* 或 hidden */
     }
     

3. Flexbox布局：

   • 使用 Flexbox 布局可以更方便地处理此类问题，因为它会自动计算容器的高度来适应子元素的高度。

     .parent {
         display: flex;
     }
     
     

4. Grid布局：

   • CSS Grid布局也能够自然地适应其内容的高度，无需额外处理浮动带来的高度塌陷问题。

5. 使用 display: inline-block 或 position: relative/absolute：

   • 虽然不是针对浮动引发的高度塌陷的直接解决方案，但在特定布局下通过改变元素的显示模式也能达到相同效果。

总之，处理高度塌陷的核心是确保父元素能够感知到其浮动子元素的高度，或者采用现代布局方式（如Flexbox或Grid）重新构建布局以避免浮动带来的问题。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。