浮动布局虽不推荐用于整体页面结构，但仍是必须掌握的上下文知识；其导致父容器高度塌陷是因为浮动元素脱离文档流，清除浮动有伪元素法、空标签法和overflow法三种有效方式。

浮动布局现在确实不推荐用于整体页面结构，但你只要还在维护老项目、读旧代码、或者面试被问到，就绕不开 float 和清除浮动——它不是“过时知识”，而是“必须懂的上下文”。

为什么 float 会让父容器高度塌陷

这是最常踩的坑：给子元素加了 float: left 或 float: right，父容器突然“看不见”子元素了，高度变成 0。根本原因是浮动元素脱离了普通文档流，父容器计算高度时直接忽略它们。

• 典型现象：div 包着几个 float: left 的 div，背景色/边框消失，后续元素往上顶
• 不是浏览器 bug，是 CSS 规范明确规定的渲染行为
• overflow: hidden 能“看起来”修复，但本质是触发 BFC（块级格式化上下文），不是真正“清除”浮动

三种真正有效的清除浮动方法怎么选

别只记“clearfix”，得知道每种方案的适用边界和副作用。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• ::after 伪元素 + clear: both（现代推荐）：

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

  ✅ 兼容到 IE8，不污染 HTML 结构；❌ IE6/7 需额外 hack（zoom: 1）
• clear: both 空标签法（老项目常见）：

  <div class="wrap">
    <div style="float:left"></div>
    <div style="float:right"></div>
    <div style="clear:both"></div>
  </div>

  ✅ 直观、兼容性无敌；❌ 多一个无意义 DOM 节点，语义污染
• overflow: auto 或 hidden（快捷但危险）： ✅ 一行 CSS 解决；❌ 可能意外裁剪子元素（比如下拉菜单溢出）、影响 position: absolute 定位参考系

clear 属性到底清什么、在哪用

clear 不是“把浮动取消”，而是“让当前元素避开前面浮动元素占据的空间”。它只对**自身生效**，且必须用在**块级元素**上。

• 错误用法：float: left; clear: both —— 这会把自己也挤到下一行，还浮不起来
• 正确场景：导航栏里最后一个 li 后跟一个 div，想让它从新行开始，就给这个 div 加 clear: both
• 取值区别：clear: left 只避开左边浮动元素，clear: right 只避开右边，clear: both 都避开
• 注意：clear 对 inline 元素无效，对 flex / grid 子项也无效（它们根本不走浮动流）

真正难的不是写对那几行 CSS，而是判断“这里该不该用浮动”——比如图文混排用 float 依然合理，但做三栏布局时，如果父容器没设宽、又没清除，塌陷就会悄无声息地破坏整个视觉节奏。老代码里藏得最深的 bug，往往就卡在这一行没写的 clear 上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！