浮动使块级元素退出普通文档流，不再独占一行，宽度收缩为内容宽，文字可绕行而兄弟块级元素“看不见”它；现代布局应优先使用flex或grid，float仅适用于图文环绕等特定场景。
因为 float 的本质是让元素“退出普通文档流”，块级元素一旦浮动，就不再按块级规则参与行框计算，自然也就不再独占一行。
浮动直接取消块级元素的“换行特权”
默认情况下，<div> 这类块级元素会强制换行、撑满父容器宽度。但一旦设置 float: left 或 float: right，浏览器立刻执行两个动作：一是把它从普通文档流中移除，二是把它当作一个“可内联摆放的盒子”来处理。
这意味着它不再触发块级格式化上下文（BFC）的换行行为，也不再自动占据整行宽度——哪怕它本身没设 width，也会收缩为内容宽度，并尝试与同方向其他浮动元素并排。
- 没浮动的
<div>：强制独占一行，margin-top/bottom产生垂直间距 - 加了
float: left的<div>：宽度收缩，可能和下一个浮动<div>挤在同一行，margin只在浮动方向起作用（如float: left时margin-right有效，margin-bottom对后续块级元素无效） - 混合场景（一个浮动 + 一个不浮动）：
float元素视觉上“飘走”，后面那个不浮动的<div>会从顶部开始渲染，像它不存在一样
为什么文字能绕行，但兄弟 <div> 却“看不见”它？
这是浮动最易混淆的一点：它对行内内容（text、<span>）和块级内容（<div>、<p>）的影响完全不同。
立即学习“前端免费学习笔记（深入）”；
浮动元素仍参与**行内格式化上下文（IFC）**，所以段落文字会自动计算绕行路径；但它已完全退出**块级格式化上下文（BFC）**，因此后续块级兄弟元素的布局坐标系里，根本查不到它的位置信息。
- 文字绕行：是浏览器在每行的
line-box内动态避让浮动边界，属于渲染层行为 - 块级元素重叠：是因为父容器高度塌陷 + 后续块级元素的
margin-top从父容器顶部起算，不是从浮动元素底部起算 - 试图用
clear让块级元素“避开”浮动？必须确保该元素是块级、且 DOM 顺序紧邻浮动元素之后，否则无效
float 不是布局工具，别拿它做栅格系统
现代开发中，用 float 实现多列布局是反模式。它带来的副作用（父容器高度塌陷、清除逻辑脆弱、响应式难控制）远超便利性。
- 替代方案优先选
display: flex：子项天然不脱离文档流，父容器高度自动包含，flex-wrap控制换行，gap管理间距 - 复杂二维布局用
display: grid：行列定义清晰，无需浮动、清除或 hack - 唯一合理使用
float的场景：图文环绕（如文章页右图左文）、打印样式分栏、极老环境兼容
真正容易被忽略的是：即使你用 display: flow-root 或伪元素修复了父容器高度，float 元素依然脱离文档流——它的语义从未改变，只是你强行让父容器“重新看见”了它。这点决定了你一开始就不该为布局而选它。
