浮动元素脱离文档流是因为float使元素脱离普通流并左/右偏移，导致父容器高度塌陷、兄弟元素上移等布局错乱；清除浮动需在后续元素用clear:both，伪元素clearfix或display:flow-root更优。
浮动元素为什么会脱离文档流
因为 float 的本质是让元素“脱离普通流”，向左或右偏移，同时允许内联内容（如文字）环绕它。这导致父容器无法感知浮动子元素的高度，常见表现为父容器高度塌陷、后续元素上移、布局错乱。
典型症状：height: 0 的父容器，背景色/边框消失；兄弟块级元素突然顶到浮动元素旁边；页面底部元素位置异常。
- 浮动只影响**块级元素**的布局行为，对
display: inline元素无效 -
float: left和float: right不会互相排斥，但同方向浮动会依次排列 - CSS Grid 或 Flex 布局中无需使用
float，强行混用反而增加复杂度
clear: both 不是万能解，但必须理解它的作用边界
clear 并不清除浮动本身，而是控制**当前元素的边不能紧贴前面浮动元素的同一侧**。比如 clear: both 表示该元素的上边距必须避开所有已浮动的左右元素。
常见误用：在浮动子元素上加 clear —— 这毫无意义，因为清除的是“自己之前”的浮动，不是“自己身上”的浮动。
立即学习“前端免费学习笔记（深入）”；
- 正确用法：在需要“换行”或“撑开父容器”的那个兄弟元素上设置
clear: both - 如果父容器后紧跟另一个浮动容器，
clear必须加在后者上，而非前者内部 -
clear: left/clear: right可精准控制，避免过度清除影响布局灵活性
伪元素清除法（clearfix）仍是主流可靠方案
给浮动容器添加 ::after 伪元素并设置 clear: both，是最兼容、最可控的清除方式。它不依赖额外 DOM 节点，也不改变原有结构语义。
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 display: block 更稳妥，能避免 IE6–7 中某些 zoom: 1 触发的渲染 bug；现代项目可改用 display: flow-root（见下一条）。
- 必须为伪元素设置
content，否则不渲染 - 不要用
visibility: hidden或height: 0替代display: table，可能破坏清除效果 - 若容器本身有
overflow: hidden，虽能触发 BFC 撑高，但会意外裁剪position: absolute子元素
现代替代方案：用 display: flow-root 替代 clearfix
display: flow-root 是 CSS Level 3 引入的专门用于创建 BFC 的值，它既能包含浮动子元素，又不会像 overflow: hidden 那样带来副作用。
相比 clearfix，它更简洁、语义更清晰，且无需伪元素 hack。但需注意浏览器兼容性：IE 完全不支持，Safari 10.1+、Chrome 58+、Firefox 53+ 支持良好。
- 直接写在浮动容器上：
display: flow-root即可，无需额外类名或伪元素 - 它不影响子元素的定位、溢出或滚动行为，比
overflow: auto更干净 - 若项目需兼容 IE11 或更低版本，仍需回退到
clearfix方案
真正容易被忽略的点是：清除浮动不是“修一个 bug”，而是选择一种布局模型。当频繁靠 float + clear 组合实现多栏布局时，该考虑是否该迁移到 Flex 或 Grid——它们从设计上就规避了浮动的副作用。
