浮动清除后意外间距主因是父容器塌陷、行框基线偏移或margin折叠，非clear本身所致；应触发BFC、修正行框、阻止margin合并或用伪元素清除。
浮动元素清除后出现意外间距，通常不是因为清除本身导致，而是浮动影响了父容器高度、行框基线或内联上下文，再叠加 margin/padding 的层叠规则引发的视觉错觉。直接调大或调小 margin/padding 往往治标不治本，甚至让问题更混乱。
检查父容器是否塌陷
浮动子元素会让父容器高度坍缩为 0，此时看似“多出”的间距，其实是父容器下方相邻块级元素（比如下一个 div）紧贴在了浮动元素底部，而非父容器底部。
- 给父容器设置 overflow: hidden 或 overflow: auto（触发 BFC），观察间距是否恢复正常
- 或者用伪元素清除法：.clearfix::after { content:""; display:table; clear:both; }，并确保父容器没有意外的 padding-top/bottom
- 避免只对浮动元素自身加 clear，这无法恢复父容器高度
留意行内/行框（line box）干扰
当浮动元素与文字或其他内联内容共存时，浏览器会为文本行生成行框，而浮动元素会“顶起”行框基线，造成上方或下方留白——这种空隙不是 margin，不能靠改父容器 padding 消除。
- 给浮动元素设置 vertical-align: top（适用于 inline-block 或 img 等替换元素）
- 将包含浮动的容器设为 font-size: 0，再在子元素中重置 font-size（可消除行框间隙）
- 把文字内容包裹在 div 中并设为 block，避免与浮动元素处于同一行框
审查 margin 合并与折叠行为
清除浮动后，如果紧接着是普通块级元素，它的上边距可能和前一个非浮动兄弟元素的下边距发生合并（margin collapse），导致实际间距小于预期。
立即学习“前端免费学习笔记（深入）”；
- 检查相邻元素是否有 margin-top / margin-bottom，尝试将其中一个改为 padding
- 给清除后的容器添加 overflow: hidden 或 border: 1px solid transparent，可阻止 margin 合并
- 使用 display: flow-root（现代推荐）替代 overflow:hidden，语义更清晰且不影响裁剪
慎用“万能清浮”后的硬调间距
像 clear: both 元素（如 <div style="clear:both"></div>）本身是块级元素，默认带上下 margin（如浏览器默认 p 或 div 的 margin），容易被误认为是“清除导致的间隙”。
- 清除元素应设 height: 0; margin: 0; font-size: 0; line-height: 0;
- 优先用伪元素清除（
::after），避免插入无意义 DOM 节点 - 若必须用空 div 清除，请显式重置其所有盒模型属性
