浮动元素使父容器高度塌陷是因为其脱离文档流，父容器无法感知其高度；正确清除方式包括伪元素法（需content+display+clear）、overflow隐藏或display:flow-root，而非在父容器设clear:both。

浮动元素为什么会让父容器高度塌陷

因为 float 会让元素脱离普通文档流，父容器在计算高度时“看不见”浮动子元素，只按非浮动内容撑开。常见现象是：父容器背景色/边框突然消失、后续元素上移覆盖浮动区域。

clear: both 不是万能解，用错位置就失效

clear 只对紧跟在浮动元素之后的**块级兄弟元素**生效，不是给父容器加就能清浮动。很多人在父容器上写 clear: both，完全没用——它不作用于自身，只影响布局顺序。

• ✅ 正确：在浮动元素后面加一个空 <div>，并设 <code>clear: both
• ❌ 错误：给父容器加 clear: both（无效）
• ⚠️ 注意：clear 对 inline 或 flex 子项不起作用

推荐用 BFC 方式清除浮动，但别乱触发

让父容器形成 BFC（块级格式化上下文），就能包含内部浮动元素，自然撑高。常用且安全的方式是：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 给父容器设 overflow: hidden 或 overflow: auto（注意：可能意外裁剪 position: absolute 子元素或阴影）
• 用 display: flow-root（现代标准方案，无副作用，Chrome 64+/Firefox 62+ 支持）
• 避免用 display: inline-block 或 float 自身来触发 BFC，会改变父容器的显示行为

伪元素清除法要写全，漏掉 display 就白干

这是兼容性好、语义干净的主流做法，但必须写完整：

 .container::after {
  content: "";
  display: table;
  clear: both;
}

漏掉 display: table（或 block）会导致伪元素不占行、clear 失效；content: "" 缺失则伪元素根本不会渲染。

如果父容器本身是 flex 或 grid 容器，::after 默认不参与主轴排列，此时需额外设 flex: 0 0 100% 或改用 display: flow-root。