float本质是图文环绕排版指令而非布局工具，它使元素脱离文档流、不参与父容器高度计算，但保留对行内内容的影响；clear仅控制自身上边界避开浮动元素，父容器塌陷是CSS规范行为，应优先用display: flow-root触发BFC修复。
因为 float 的设计目的从来就不是“布局容器”，而是“图文环绕”——它让元素从块级流中“退籍”，只保留对行内内容的影响力。
float 本质是排版指令，不是布局工具
浏览器渲染时，float: left 或 float: right 会触发一个明确动作：把该元素从普通文档流（normal flow）中移除。这不是 bug，是 CSS 2.1 规范写死的行为。它不参与父容器的 height 计算，也不占位后续块级元素的位置，但依然留在包含块内、仍受 margin/padding/border 约束，并继续参与行框（inline formatting context）——所以文字能绕着它排。
常见错误现象：
- 父容器高度为
0px，背景色/边框消失 - 紧随其后的
<div>从顶部开始渲染，和浮动元素视觉重叠 - 段落文字被右浮动图片“切掉开头”，但又没被挡住——只因文字在行框里自动绕行
为什么 clear 不等于“取消 float”
clear 只作用于**自身**，不是回收浮动元素。它只是告诉当前元素：“你的上边界，必须低于指定方向所有浮动元素的 bottom”。
立即学习“前端免费学习笔记（深入）”；
使用场景：
-
clear: left→ 当前元素必须在所有float: left元素下方，对float: right无效 -
clear: both→ 同时避开左右浮动，常用于浮动列表后的分隔线或按钮 -
clear对display: inline元素完全无效，只对块级元素起作用
父容器塌陷的根本原因：规范不认它
父容器高度塌陷，不是计算失误，而是 CSS 明确规定：**块级格式化上下文（BFC）中，高度计算不包含脱离文档流的子元素**。哪怕你给浮动子元素设了 height: 200px，父容器也视而不见。
触发 BFC 是最干净的修复方式，推荐优先用：
-
display: flow-root（现代标准，语义清晰，无副作用） -
overflow: hidden（兼容性好，但可能意外裁剪溢出内容） - 避免用
float: left或position: absolute给父容器——它们虽能触发 BFC，但会让父容器自己也脱标
现代开发中还用 float 吗？
几乎不用来构建整体布局。Flex 和 Grid 已成为一维/二维布局的事实标准。float 的生存空间只剩三类场景：
- 老项目维护，读得懂为什么
<div>“突然不见了” - 打印样式表（print media）中控制图文混排
- 某些 CMS 输出的富文本，
<img>带float类名，需兼容处理
真正容易被忽略的是：即使你没写 float，某些第三方组件或编辑器生成的 HTML 可能悄悄带上它——排查布局异常时，别只盯着自己的代码。
