根本原因是浮动元素脱离文档流导致父容器高度塌陷，使后续元素上浮钻入空隙；解决需触发BFC（如display:flow-root），而非误用clear于浮动元素自身或inline元素。
后续元素位置错乱，根本原因是浮动元素脱离文档流后父容器高度塌陷，导致紧随其后的元素“上浮”钻进浮动区域——这不是样式写错了，是 float 的行为本身。解决它不靠猜 clear 加在哪，而要控制 BFC 和文档流关系。
为什么 clear: both 加在浮动元素自己身上没用
clear 不是“清除浮动状态”，而是让当前元素避开上方已存在的浮动兄弟。它只对块级、处于文档流中的元素生效，且必须有“前一个浮动兄弟”才触发下移。
- 给
float: left的子项自己加clear: both：浏览器直接忽略，因为该元素已经脱离流，clear失去参照对象 - 把
clear: both写在<span>或<em>上：无效，inline 元素不响应clear - 正确位置是：最后一个浮动元素之后、第一个块级文档流元素（如
<div>、<p>）上
父容器高度塌陷的真正修复点是触发 BFC
父容器无法撑开，本质是它没形成独立的格式化上下文（BFC）。靠加空标签或乱设 overflow 是临时补丁，现代方案应直击根源。
-
display: flow-root是专为此设计的，一行生效，不裁剪position: absolute弹层、不干扰box-shadow，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持 -
overflow: hidden虽兼容老浏览器，但可能意外裁剪下拉菜单、动画位移后的视觉区域 - 伪元素
::after清除法仍需保留：仅当需支持 IE11 或旧 Safari 时使用，漏掉content: ""或display: block就完全失效
响应式断点里错乱突然出现，大概率是宽度计算偏差
桌面端四列整齐，缩到平板就错位，往往不是 clear 没清好，而是浮动项实际占宽超出了容器 —— 尤其当用了 padding 或 border 却没设 box-sizing: border-box。
立即学习“前端免费学习笔记（深入）”；
- 所有浮动子项必须加
box-sizing: border-box，否则width: 25%+padding: 8px会溢出 - HTML 中浮动元素之间不能有换行或空格，否则渲染器插入约 4px 间隙
- 用
margin-right控制间距时，最后一项要用:not(:last-child)避免换行后右侧留白
最容易被忽略的是：BFC 触发是单层的。display: flow-root 只作用于当前父容器，不会向下穿透；子容器若也含浮动，得单独处理。别假设“清了一次就全好了”。
