根本原因是父容器高度塌陷；浮动元素脱离文档流致父容器高度为0，后续块级元素从顶部渲染而“被盖住”。display: flow-root创建bfc可完美修复，现代浏览器全支持。
为什么浮动元素会“盖住”下方块级元素
根本原因不是 float 本身错，而是父容器高度塌陷了。浮动元素脱离文档流后，父容器计算高度时直接忽略它们，结果自身高度变成 0 或极小值，导致后续的 div、section 等块级元素从“视觉顶部”开始渲染，看起来就像被浮上去的元素盖住了。
这不是浏览器 bug，是 CSS 规范行为。常见现象包括：侧边栏浮动后，主内容区背景消失、边框错位；卡片列表里图片左浮动，下一张卡片直接叠在上一张图片下方。
关键点在于：文字环绕是 float 的本职工作，但块级元素“跑上来”是因为父容器没把浮动子项包住。
display: flow-root 是最干净的修复方式
给浮动元素的直接父容器加 display: flow-root，就能让该容器创建一个新的 BFC（块级格式化上下文），自动包含所有浮动子项，高度自然撑开。
它不裁剪内容、不触发滚动条、不需要额外 DOM 节点，语义清晰，现代浏览器（Chrome 58+、Firefox 55+、Safari 10.1+）全部支持。
- 写法：
.container { display: flow-root; } - 对比
overflow: hidden：后者虽也触发 BFC，但可能意外裁掉阴影、下拉菜单或圆角 - 对比
overflow: auto：在 Safari 中对min-height敏感，容易多出滚动条
clear: both 只对当前元素生效，别乱加在父容器上
clear: both 的作用对象是它自己，不是它的父级或兄弟。加在浮动元素后面一个空 div 上可以强制换行，但加在父容器上完全无效——父容器又不浮动，clear 对它没意义。
常见错误写法：.container { clear: both; }，这不会解决塌陷，也不会影响内部浮动子项。
真正有效的使用场景只有两个：
- 在最后一个浮动子元素之后，插入一个块级元素并设
clear: both - 给需要“避开浮动”的下一个兄弟块级元素自身加
clear: both（比如浮动导航栏下方的主内容区）
旧项目兼容可选 clearfix，但别再为新布局用 float
如果必须支持 IE9 或老安卓 WebView，可用伪元素方案：.clearfix::after { content: ""; display: block; clear: both; }，加在父容器上即可。
但要注意：这个技巧只是补救手段，不是设计意图。真正容易被忽略的是——float 从来就不是为整页布局设计的。图文混排才是它的原始语义。
现在写新项目，只要不是维护十年前的老系统，就该直接用 display: flex 或 display: grid 替代 float 布局。它们天然形成 BFC，不脱离文档流，也没有清除浮动这一说。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
