浮动元素脱离文档流导致后续块级元素“看不见”它，这不是bug而是float的设计本意；后续非浮动块级元素布局时无视其存在，文字绕排而块级容器上浮错位，根本原因是父容器computed height为0px。
浮动元素脱离文档流，后续块级元素“看不见”它
这不是 bug，是 float 的设计本意：float: left 或 float: right 会让元素从普通文档流中抽离，不再占据原始空间。后续的非浮动块级元素（如 <div>、<p>）在布局时，会当作它根本不存在，直接从它原本该在的位置开始渲染——结果就是文字绕着它走，而块级容器却“穿”到它底下或侧边。
常见错误现象：
- 父容器背景/边框消失 → 实际是 computed height 为
0px - 下一个
<section>紧贴浮动元素右侧显示，而非换行 - 响应式断点下，本该居中的内容被挤到浮动图右侧并换行失败
clear: both 必须加在非浮动块级元素上才有效
clear: both 不是修复浮动，而是让「当前这个仍处于文档流中的块级元素」主动避开所有浮动影响，下移到浮动元素下方。它对浮动元素自身无效，对父容器也无效（除非父容器本身有非浮动内容撑高）。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 在最后一个浮动子元素之后，插入一个
display: block的元素（比如<div class="clear"></div>），并设clear: both - 更推荐伪元素方案：
.clearfix::after { content: ""; display: table; clear: both; }，但必须确保父容器没设固定height截断伪元素 - 避免把
clear: both加在浮动图片、<ul>父容器或position: absolute元素上
父容器高度塌陷才是多数问题的根源
只要父容器 computed height 是 0px，它的 background、border、padding 都不可见——这不是样式没生效，是渲染前提缺失。浮动子项不参与父容器高度计算，导致父容器“不知道自己有多高”。
验证与修复：
- 开发者工具 Layout 面板勾选 “Show box model”，看父容器实际边界是否包裹子项
- 临时加
overflow: hidden，若布局立刻正常，基本可断定是塌陷问题 - 现代项目优先用
display: flow-root替代overflow: hidden，无裁剪副作用 - 别依赖
clear撑高父容器：那个clear: both的空<div>能让背景回来，靠的是它自身的line-height贡献了哪怕几像素高度
图文混排场景下，环绕错位常因 margin 加错位置
文字环绕是 float 的默认行为，但“绕不上去”往往不是 float 失效，而是浮动元素自己没留出足够间距，或文字容器触发了 BFC（如 overflow: hidden）反而阻止环绕。
关键细节：
- 左浮动图片必须加
margin-right和margin-bottom，不能只写margin: 12px（margin-top可能把图顶出父容器） - 右浮动图片对应加
margin-left和margin-bottom - 文字容器本身不要设
overflow: hidden或display: flex，否则会关闭环绕能力 - 图片务必设
width和height: auto，否则浏览器无法确定浮动区域边界
0px，以及清除元素是否落在浮动元素的**下一个兄弟位置**且保持 display: block。用 float 做整体布局，本质是在和 CSS 渲染规则博弈；图文混排除外，其他场景建议直接切到 display: flex 或 display: grid。 
