浮动元素脱离文档流导致后续块级元素上移占位，是CSS规范行为而非bug；因其不参与父容器高度计算，父容器塌陷，后续块级元素按“流中无该元素”渲染，而行内内容则环绕浮动元素。
浮动元素脱离文档流，后续块级元素会“无视”它而上移占位，导致视觉重叠或错位——这不是 bug，是 float 的设计行为。
为什么 float 会让后面元素“跑上来”？
设置 float: left 或 float: right 后，元素会从标准文档流中被抽离，不再占据空间。此时：
- 后续的块级元素（如
div）按“流中无该元素”渲染，直接占据它原本的位置，造成覆盖或错位 - 后续的行内内容（如文字、
span）则会智能绕开浮动元素，形成环绕效果——这才是float的原始用途 - 父容器若只含浮动子项，高度会塌陷为 0，因为无法感知子项存在
clear 属性只能解决局部问题，不是万能的
clear 的作用是让当前元素“避开”指定方向的浮动元素，但它不修复父容器塌陷，也不改变浮动元素脱离流的本质：
-
clear: left→ 当前元素下移，直到左侧无左浮动元素 -
clear: both→ 下移直到左右两侧都无浮动元素（常用于清空浮动后的换行） - 仅对应用了
clear的那个元素生效，不影响其兄弟或父级 - 如果浮动元素本身没结束（比如没闭合、没触发 BFC），
clear可能失效或位置异常
真正有效的清除浮动方案有哪些？
目标是让父容器重新“感知”浮动子项高度。推荐以下三种，按现代性排序：
-
display: flow-root：最简洁，给父元素加这一条即可创建新的 BFC，自动包含浮动子项。兼容性到 Chrome 64+/Firefox 59+/Safari 15.4+，2026 年已足够稳妥 -
::after伪元素法：兼容老浏览器的兜底方案。需定义类如.clearfix::after，确保content非空、display: block、clear: both -
overflow: hidden（或auto）：通过触发 BFC 实现包裹，但可能意外裁剪溢出内容或影响滚动行为，慎用
容易被忽略的关键点
浮动布局的坑不在“怎么清”，而在“是否必须用”：
- 现代项目优先用
flex或grid替代float做布局，语义清晰、无塌陷、响应式友好 - 如果只是图文环绕，
float仍是合理选择，但别把它当“多列布局工具”滥用 - 混用浮动与 flex/grid 容易引发不可预期的层叠上下文和尺寸计算偏差，尤其在嵌套场景下
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
