清除浮动后仍有空白，大概率是html换行空格被解析为字符或基线对齐所致，而非clear失效；clearfix仅防塌陷，不消除空白渲染。
清除浮动后仍有空白，大概率不是 clear 没生效，而是 HTML 源码里的换行符和空格被浏览器解析为真实空白字符，在父容器的 font-size 和 line-height 下撑开了视觉间隙——clearfix 只解决塌陷，不消灭空白渲染。
检查父容器是否真被撑开（先确认是不是塌陷）
打开开发者工具，悬停父容器，看 computed 中的 height 值：
- 如果是 0 或远小于预期，说明根本问题是**高度塌陷未真正修复**，clear: both 加错了位置或没触发 BFC；
- 如果高度正常，但子元素之间/下方仍有 4px 左右间隙，那才是空白字符或基线对齐问题。
常见误判：给浮动元素自己加 clear: both，或给父容器加 clear: both——语法合法，但完全无效。
浮动子元素间有间隙？盯紧 HTML 换行和 font-size
多个 float: left 的 <div> 写成多行时，换行符会被解析为一个空格（U+0020），在默认 <code>font-size: 16px + line-height: 1.2 下，约撑出 4px 宽度。
- 快速验证：右键父容器 → “Edit as HTML”，把子元素压成一行：
<div class="item"></div> <div class="item"></div>，刷新看间隙是否消失 - HTML 无法压缩时（如 Vue 模板生成），给父容器设
font-size: 0，再给每个子元素显式重置font-size（如.item { font-size: 14px; }） -
font-size: 0对<img>无影响，但会干掉按钮文字、链接文本——漏重置就变空白 - 别用
line-height: 0替代，它会影响子元素内文字行高，更难控制
浮动后下方大块空白？重点查父容器是否形成 BFC
所谓“大空白”，本质是父容器高度为 0，后续元素（如 <footer></footer>）从 0 位置开始渲染。必须让父容器主动创建 BFC：
- 现代首选：
display: flow-root—— 专为此设计，无裁剪、无滚动条、不干扰层叠上下文，Chrome 64+/Firefox 59+/Safari 15.4+ 支持 - 兼容老浏览器：
overflow: hidden有效，但可能裁剪position: absolute子项、阴影或下拉菜单 - 伪元素清除法失效？大概率漏了
display: table或display: block：.clearfix::after { content: ""; display: table; clear: both; } - 别给父容器写
zoom: 1（IE6/7 专用），现代项目已无必要
图文环绕时文字贴图太紧或错位？控制图片自身 margin 并设 display: block
文字环绕的边界由浮动图片自身的 margin-right（左浮动）或 margin-left（右浮动）决定，不是加在 <p></p> 或父容器上。
-
<img>必须显式设display: block，否则部分浏览器忽略其margin - 只写需要的方向：
float: left; margin-right: 16px;，避免margin: 12px这类简写——margin-top/bottom会干扰行高，造成段落上下错位 - 响应式断点里务必同步重置：
@media (max-width: 768px) { img { float: none; margin-left: 0; margin-right: 0; } } - 如果间隙来自基线对齐（如图片下方几像素白边），加
vertical-align: bottom或直接display: block
最常被忽略的一点：你正在调试的“空白”，可能同时混着三种问题——父容器塌陷 + HTML 空格间隙 + 图片基线预留空间。得一层层剥开看 computed 样式，而不是堆 font-size: 0 和 clear: both。
