float脱离文档流是css 2.1规范明确规定的渲染行为，元素退出normal flow后不再参与父容器高度计算，导致塌陷，但仍在包含块内并影响行内内容环绕；修复应优先用display: flow-root触发bfc。
float 元素被“视为脱离标准文档流”，不是浏览器的 bug 或兼容性问题，而是 CSS 2.1 规范明确规定的渲染行为：它主动退出 normal flow，后续块级元素布局时直接忽略它的存在。
这导致父容器高度塌陷、兄弟块级元素上移、文字却能绕着它排——表面矛盾，实则逻辑自洽。关键在于理解 float 的原始设计意图和浏览器如何分层处理布局上下文。
float 脱离文档流的本质是“退出块级格式化上下文（BFC）”
浏览器在计算块级容器高度时，只纳入仍在 normal flow 中的子元素贡献。一旦设了 float: left 或 float: right，该元素就不再参与父容器的 height 计算，哪怕它有 height: 300px —— 父容器“看不见”它。
但它并未消失或失效：
- 仍受 margin、padding、border 影响
- 仍在包含块内定位（不会飞出父容器）
- 继续参与行内格式化上下文（IFC），所以文字能绕排
- display 值（如 display: block）不影响脱标行为，只要 float 不是 none
clear 不是“清除浮动”，而是“避开浮动区域”
clear 属性只作用于**当前元素自身**，告诉它：“你的上边界必须低于指定方向所有浮动元素的 bottom”。它不改变已浮动元素的位置，也不让它们回归文档流。
-
clear: left→ 当前元素避开所有float: left元素，对float: right无效 -
clear: both→ 同时避开左右浮动，常用于浮动列表后撑开父容器 -
clear对display: inline元素完全无效，只对块级元素起作用
父容器高度塌陷不是漏算，是规范不认它
父容器高度为 0px，不是计算错误，而是标准写死的逻辑：**BFC 高度计算不包含脱离文档流的子元素**。修复不是“补 height”，而是让父容器重新“看见”浮动子元素。
推荐修复方式（按优先级）：
- display: flow-root：现代标准，语义清晰，无副作用，首选
- overflow: hidden：兼容性好，但可能意外裁剪溢出内容
- 避免用 float: left 或 position: absolute 给父容器加 —— 它们虽能触发 BFC，但会让父容器自己也脱标
为什么现代项目几乎不用 float 做布局？
因为 float 的设计目标从来不是“结构化布局”，而是“图文环绕”。当它被强行用于多列、导航栏、卡片网格时，会暴露一系列不可控问题：
- 浮动元素的
margin在 IE6 中会发生双倍合并（至今仍有老系统残留） - 与
position混用时，叠加顺序和包含块关系极难预测 - 响应式场景下，浮动列无法自动换行或对齐，
flex-wrap和grid-template-columns才是原生解 - 部分 CSS 重置库（如 Normalize.css）默认插入
clear: both，可能掩盖真实问题
真正需要关注的，不是怎么用 float 布局，而是看懂老代码里那些“父容器没背景”“文字突然贴到图片左边”的根源 —— 它们都在告诉你：这个元素，已经“退籍”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
