清除浮动后父容器底部多出空白，是因为伪元素（如.clearfix::after）默认display: block会继承line-height产生隐式高度，需配合height: 0、visibility: hidden或display: table等方案彻底消除；同时需检查clear位置是否正确、html换行符导致的空白字符及浏览器兼容性问题。
清除浮动后父容器底部多出空白，是因为伪元素本身占位
伪元素（如 .clearfix::after）即使 content: ""，默认仍是 display: block，会继承父容器的 font-size 和 line-height，从而产生隐式高度。这个高度不是“看不见”，而是真实参与盒模型计算——尤其在旧版浏览器或未重置样式的上下文中，常表现为 16–24px 的底部空白。
常见错误写法：.clearfix::after { content: ""; clear: both; }，漏掉关键压制属性。
-
height: 0是基础，但单独用仍可能因line-height撑高 - 必须搭配
visibility: hidden或font-size: 0/line-height: 0彻底消除渲染影响 - 更稳妥的现代写法是
display: table：它不继承line-height，天然无默认行高干扰
HTML 换行符被解析为空格，导致子元素间出现 4px 间隙
清除浮动解决的是父容器塌陷，但不会抹除 HTML 源码中换行和缩进产生的空白字符。当多个浮动子元素写成多行时，换行符会被浏览器解析为 U+0020 空格，在 font-size: 16px + 默认 line-height: 1.2 下，撑开约 4px 宽度，并参与基线对齐——尤其在 <img> 或含文字的 <div> 旁，错位立刻可见。
<ul>
<li>快速验证：在开发者工具中右键父容器 → “Edit as HTML”，把所有子元素压成一行，间隙消失即确认是此问题</li>
<li>修复方式：删掉 HTML 中浮动子元素间的换行与空格；或给父容器设 <code>font-size: 0，再给子元素单独设字号
display: flow-root 不解决此问题，它只管 BFC，不管空白字符渲染clear: both 加错了位置，导致“清了但没清到位”
clear: both 不是让父容器变高，而是控制“当前元素上边不能紧贴前面的浮动”。如果把它加在浮动元素自己身上、或加在父容器上，语法虽合法，但完全无效。真正需要它的是浮动之后、同级的下一个块级元素——比如紧跟在浮动列表后的 <footer></footer> 或 <div class="content">。
<ul>
<li>典型误用：<code>.float-item { clear: both; } —— 对已浮动的元素，clear 无定位意义
overflow: hidden 或 height: 0，会直接压制伪元素的清除行为::after 节点是否存在？display 和 content 是否生效？现代项目该用 display: flow-root，但别忽略它的兼容边界
display: flow-root 是目前最干净的解法：它让父容器形成 BFC，自动包含浮动子元素，不依赖伪元素、不引入额外高度、不裁剪溢出内容。但它不是万能补丁——IE 全系不支持，Safari 10.1+、Chrome 58+、Firefox 53+ 才开始支持。
- 上线前必须查项目目标浏览器版本；若需支持 IE11 或更低，仍得回退到
overflow: hidden或完整 clearfix -
display: flow-root无法解决 HTML 空格间隙问题，该调 HTML 还得调 - 混用浮动和 Flex/Grid 会放大问题：Flex 容器内设
float会让子项脱离 flex 布局，clear 失效，此时应直接删掉 float
margin: 0 或 overflow: hidden。
