CSS浮动清除后 still有空白该如何处理？

清除浮动后仍有空白，大概率是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），在默认 font-size: 16px + line-height: 1.2 下，约撑出 4px 宽度。

1. 快速验证：右键父容器 → “Edit as HTML”，把子元素压成一行：<div class="item"></div><div class="item"></div>，刷新看间隙是否消失
2. HTML 无法压缩时（如 Vue 模板生成），给父容器设 font-size: 0，再给每个子元素显式重置 font-size（如 .item { font-size: 14px; }）
3. font-size: 0 对 <img> 无影响，但会干掉按钮文字、链接文本——漏重置就变空白
4. 别用 line-height: 0 替代，它会影响子元素内文字行高，更难控制

浮动后下方大块空白？重点查父容器是否形成 BFC

所谓“大空白”，本质是父容器高度为 0，后续元素（如 <footer>）从 0 位置开始渲染。必须让父容器主动创建 BFC：

1. 现代首选：display: flow-root —— 专为此设计，无裁剪、无滚动条、不干扰层叠上下文，Chrome 64+/Firefox 59+/Safari 15.4+ 支持
2. 兼容老浏览器：overflow: hidden 有效，但可能裁剪 position: absolute 子项、阴影或下拉菜单
3. 伪元素清除法失效？大概率漏了 display: table 或 display: block：.clearfix::after { content: ""; display: table; clear: both; }
4. 别给父容器写 zoom: 1（IE6/7 专用），现代项目已无必要

图文环绕时文字贴图太紧或错位？控制图片自身 margin 并设 display: block

文字环绕的边界由浮动图片自身的 margin-right（左浮动）或 margin-left（右浮动）决定，不是加在 <p> 或父容器上。

1. <img> 必须显式设 display: block，否则部分浏览器忽略其 margin
2. 只写需要的方向：float: left; margin-right: 16px;，避免 margin: 12px 这类简写——margin-top/bottom 会干扰行高，造成段落上下错位
3. 响应式断点里务必同步重置：@media (max-width: 768px) { img { float: none; margin-left: 0; margin-right: 0; } }
4. 如果间隙来自基线对齐（如图片下方几像素白边），加 vertical-align: bottom 或直接 display: block

最常被忽略的一点：你正在调试的“空白”，可能同时混着三种问题——父容器塌陷 + HTML 空格间隙 + 图片基线预留空间。得一层层剥开看 computed 样式，而不是堆 font-size: 0 和 clear: both。