嘿，较大家良好！今天咱们来聊聊 CSS 的一个有点儿让人头疼的问题：较高度塌陷。别担心，这东西其实挺简洁的，只要掌握几个较小技巧，就能轻巧松搞定。

哪些是 CSS 较高度塌陷？

先来看，咱们得先了解一下哪些是较高度塌陷。简洁 就是“塌陷”掉，也就是说它没有了内容支撑，看起来像是没有较高度一样。是不是很奇怪，YYDS！？

毕竟.… 想象一下：你有一个盒子，里面放着一些较小东西。如果盒子没有边框和底边框，那么较小东西就会把盒子挤起来。这就是较高度塌陷。

为哪些会出现较高度塌陷？

原因很简洁：显得空空如也。

咱们要解决当前这个问题

方法一：给父容器添加 `clearfix` 类

我惊呆了。 这是最常见、也是最推荐的方法。给父容器添加一个 `clearfix` 类，然后采用一个伪元素 来触发 BFC 。BFC 能够包含其内部的全部子元素和浮动元素。

代码示例

阐述

• `
  `：这是咱们的父容器
• `.clearfix::after { content: ""; display: table; clear: both; }`： 这是添加的伪元素

总体来说就这一些方法。最推荐的是采用 `display: flow-root` 或 `flex/grid` 布局，既简洁又现代化。传统方式项目中可用clearfix。关键是明白塌陷成因——子元素脱离文档流，父元素失掉内容支撑，累并充实着。。

方法二： 采用 Flexbox 或 Grid 布局替代浮动

现代化布局中,提议用 flexbox 或 gr 我持保留意见... id替代浮动布局,它们天然解决了较高度塌陷问题。

Flexbox

Grid

• `
  `: 这是主容器
• `
  `: 采用flexbox布局

此时父元素会自动包裹子元素,无需额外处理

• display: flow-root 或者flex/grid 是最佳选择；
• 传统方式项目能够采用clearfix；

十分沉关键提示

• 记住明白塌陷的原因——子元素的脱离文档流会引起内容缺失；

方法三： 给父容器设置固定较高度

.parent { height :100px;}

注意：这种方法缺乏弹性,不利于响应式设计,一般不推荐采用

一下