CSS浮动元素脱离文档流是因为float本质是图文环绕排版指令，使元素退出普通流、不参与父容器高度计算，但仍保留在包含块内并参与行框计算，故文字可绕排而块级元素无视其存在。
因为 float 的设计目标从来就不是“布局”，而是“图文环绕”——它让元素在视觉上退出块级流，但仍在行内格式化上下文中保留物理占位。
float 是排版指令，不是布局工具
浏览器渲染时，float: left 或 float: right 会触发一个明确动作：把该元素从普通文档流（normal flow）中移除。但它仍保留在包含块内，受 margin/padding/border 约束，并继续参与行框（inline formatting context）计算。文字属于行内内容，自然能“感知”它的边界并绕排。
常见错误现象包括：
- 父容器高度为
0px，背景/边框消失 - 紧随其后的
<div>从顶部开始渲染，和浮动元素视觉重叠 - 段落文字被右浮动图片“切掉开头”，但又没被挡住——只因文字在行框里自动绕行
文字绕行 ≠ 块级元素避让
只有行内内容（如文字、<span>、<img>）会自动绕开浮动区域；块级元素（如 <p>、<div>）默认不绕，而是从浮动元素原本在文档流中的位置继续往下排——这就是为什么你看到“文字爬上去”，但下面的 <div> 却没跟着上移。
立即学习“前端免费学习笔记（深入）”；
关键区别在于：
-
clear只控制**自身上边界**避开浮动元素，不是回收浮动 -
clear: left对float: right元素完全无效 -
clear对display: inline元素不起作用
为什么 overflow: hidden 能“修复”文字覆盖
overflow: hidden（或 auto、scroll）真正起作用的原理是触发 BFC（块级格式化上下文）。BFC 容器会：
- 包含内部浮动元素（父容器高度不再塌陷）
- 阻止外部文字侵入浮动区域，强制文字在 BFC 边界内重排
注意：overflow: visible（默认值）不会触发 BFC，所以加了也没用；而 overflow: hidden 有裁剪风险（比如遮住阴影或下拉菜单），overflow: auto 更安全但可能意外出现滚动条。
现代开发中容易被忽略的点
很多人试图用 z-index 解决浮动被遮挡问题，但纯浮动元素不创建层叠上下文，z-index 无效——除非同时设置 position: relative 等定位属性。更根本的问题是：你正在用一个为排版设计的机制去解决布局问题。真正的解法不是补救 float，而是判断当前场景是否真需要它：图文混排？用 float；两栏布局？优先选 display: flow-root + margin 或直接上 flex/grid。
