float 的设计目标是图文环绕排版而非布局容器，它使元素脱离普通文档流但保留对行内内容的影响，触发浏览器将其从文档流中移除，不参与父容器高度计算，仍受包含块约束并参与行框排版。
因为 float 的设计目标从来就不是布局容器，而是图文环绕排版——它让元素“退籍”普通文档流，只保留对行内内容的影响。
float 是排版指令，不是布局工具
浏览器渲染时，float: left 或 float: right 会触发一个明确动作：把该元素从普通文档流（normal flow）中移除。这不是 bug，是 CSS 2.1 规范写死的行为。
- 它不参与父容器的
height计算，也不占位后续块级元素的位置 - 但它仍留在包含块内，受
margin/padding/border约束 - 它继续参与行框（inline formatting context），所以文字能绕着它排
脱离文档流的典型表现
常见错误现象直接暴露了这个机制：
- 父容器高度为
0px，背景色/边框消失 - 紧随其后的
<div> 从顶部开始渲染，和浮动元素视觉重叠 <li>段落文字被右浮动图片“切掉开头”，但又没被挡住——只因文字在行框里自动绕行</li> <h3>clear 不等于“取消 float”</h3> <p><code>clear只作用于自身，不是回收浮动元素。它只是告诉当前元素：“你的上边界，必须低于指定方向所有浮动元素的bottom”。-
clear: left→ 当前元素必须在所有float: left元素下方，对float: right无效 -
clear: both→ 同时避开左右浮动，常用于浮动列表后的分隔线或按钮 -
clear对display: inline元素完全无效，只对块级元素起作用
真正该问的是：你还需要 float 吗？
如果只是为了多列布局或对齐，
display: flex或display: grid是更现代、更可靠的选择。它们天然不脱离文档流，父容器高度自动包含子项，不存在塌陷问题。- 只有当需要文字环绕（如图文混排）或兼容极老环境时，才需保留
float并配套处理清除逻辑 - 很多“清除浮动”的调试时间，其实本可以省下来改用
flex
注意：即使你用了
display: flow-root或伪元素清除，也改变不了 float 本身的语义——它始终是为排版服务的，不是为布局而生的。这点容易被忽略，但决定了你该不该用它。 -
