float元素脱离文档流但仍在父容器内，导致父容器塌陷和文字绕行；仅行内内容自动绕浮，块级元素默认不绕；修复需触发BFC或clear；现代仍用于图文混排等场景。
float 元素会脱离正常文档流
设置 float: left 或 float: right 后，元素不再占据其在普通流中的原始位置，而是向左或右“漂”到最近的包含块边界（或前一个浮动元素边缘），同时其他**非浮动的块级元素会无视它的存在，继续从它原本该在的位置开始布局**——这正是后续元素“被顶上来”或“文字环绕”的根源。
- 浮动元素仍保留在父容器内（不溢出，除非父容器太窄）
- 但它的高度和宽度不再参与父容器的自动高度计算（即常见“父容器塌陷”问题）
- 后续的块级元素（如
<p>、<div>）会尝试填满剩余水平空间，但若前面有浮动块，它们的line-box会绕开浮动区域，造成视觉错位
文字内容会围绕浮动元素排列
这是 float 最初的设计目的：实现图文混排。段落内的行框（line box）会根据浮动元素的边界重新计算每行的可用宽度，导致文字像水流绕过石头一样贴着浮动块边缘排列。
- 只有**行内内容（文本、
<span>、<img>等）会自动绕行**；块级元素默认不会“绕”，而是从浮动元素下方开始渲染（除非也设了float或display: inline-block） - 绕行行为受
clear属性干预：比如clear: both会让元素强制下移到所有浮动元素下方 - 如果浮动元素后面紧跟一个没有设定宽高的
<div>，它大概率会紧贴浮动元素右侧（若还有空间），而非换行——这不是 bug，是规范定义的“尽可能利用剩余空间”
父容器无法感知浮动子元素的高度
因为浮动元素已脱离文档流，父容器在计算自身高度时，会忽略所有浮动子元素的 height，只基于非浮动子元素撑开。结果就是父容器高度坍缩为 0（或仅含 padding/border），导致背景、边框、清除浮动失败等连锁问题。
- 典型症状：
background-color不显示、底部 margin 失效、兄弟元素上移 - 修复方式不是给父容器写死
height，而是触发 BFC（如overflow: hidden）或使用clear元素（如<div style="clear:both"></div>） - 现代方案更推荐用
display: flow-root—— 它显式创建 BFC 且无副作用，比overflow: hidden更安全
float 在 Flex/Grid 时代仍有实际用途
虽然 float 已不用于整体布局，但在某些场景下依然不可替代：
立即学习“前端免费学习笔记（深入）”；
- 响应式图片文字环绕（尤其 CMS 输出的富文本，无法改结构）
- 旧项目维护中需兼容 IE8–IE11 的多栏布局
- 某些 CSS 动画 + float 组合实现特殊流体效果（如瀑布流占位辅助）
- 配合
shape-outside实现非矩形文字环绕（例如圆形头像旁的文字流）
.avatar {
float: left;
width: 60px;
height: 60px;
border-radius: 50%;
shape-outside: circle();
}
浮动真正难的不是语法，而是它对文档流的“半脱离”状态：既影响别人（文字绕行、父容器塌陷），又不完全退出（仍属父容器、可参与定位上下文）。理解这点，才能预判它在复杂嵌套中的真实行为。 
