浮动元素下方多余空白源于IFC中基线对齐机制，导致父容器为容纳内联内容下降部分而撑高；清除浮动应优先用display: flow-root触发BFC，或::after伪元素法，而非仅依赖clear:both。
为什么浮动元素下方总有多余空白？
这是行内格式化上下文（IFC）和基线对齐惹的祸。浮动元素脱离文档流后，其后的内联内容（比如文字、<img alt="CSS解决浮动布局间隙问题_优化元素排列与清除浮动" >）仍按基线对齐，而默认基线落在字母 x 底部，导致父容器为容纳“看不见的下降部分”而撑高，视觉上就像浮动元素下面多了空隙。
常见现象：<div class="wrap">
<img src="a.jpg" style="max-width:90%" alt="CSS解决浮动布局间隙问题_优化元素排列与清除浮动" >一段文字</div>，.wrap 高度异常，底部留白明显。
- 不是 margin 或 padding 造成的，检查 computed styles 会发现
line-height和vertical-align是关键 - 给浮动元素加
vertical-align: top无效（它只对 inline/inline-block 生效） - 真正有效的解法是让父容器不参与 IFC —— 比如触发 BFC 或改成块级格式化
clear:both 真的能彻底清除浮动吗？
clear: both 只控制元素自身**不能被浮动元素覆盖**，并不回收浮动元素所占的空间，也不影响父容器高度塌陷问题。它只是“避让”，不是“收尾”。
典型误用：<div class="parent">
<div style="float:left">A</div>
<div style="clear:both">B</div>
</div> —— 此时 .parent 依然高度为 0，除非 B 本身有高度或内容。
立即学习“前端免费学习笔记（深入）”；
- 单独用
clear必须配合一个真实存在的块级元素（如空<div style="clear:both"></div>），但这是过时写法 - 现代方案优先用
::after伪元素 +clear，既无 DOM 污染又可靠 - 注意：若父容器已设
overflow: hidden或display: flow-root，再加clear就多余了
display: flow-root 是最干净的清除方式吗？
是的，它是目前标准中专为解决浮动塌陷设计的 display 值，创建独立的 BFC，自动包含内部浮动，且不带来副作用（不像 overflow: hidden 可能裁剪阴影或定位元素）。
兼容性已足够好：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；旧版 Safari 需用 display: -webkit-flow-root 做前缀。
- 直接给浮动父容器设置：
.parent { display: flow-root; } - 它比
overflow: auto更语义清晰，也比float自身更可控 - 不推荐和
float同时用在同一个元素上——float会让它脱离文档流，flow-root失效 - 如果项目还需支持 IE，只能退回到
::after清除法
伪元素清除法怎么写才不出错？
核心是用 ::after 在父容器末尾插入一个块级、清除浮动的匿名盒子。写错一个属性就可能失效。
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意这三行缺一不可：content 决定伪元素是否渲染；display: table（或 block）让它成为块级框；clear: both 才真正起作用。
- 别写成
display: block+height: 0—— 没有content的伪元素不会生成 - 别漏掉
content: ""，哪怕内容为空，否则整个规则被忽略 - IE6/7 需额外加
*zoom: 1触发 hasLayout - 如果父容器本身是
flex或grid容器，伪元素清除完全没必要 —— 浮动在 flex/grid 子项中本就不生效
flex 或 grid 不仅没间隙问题，还更可控、易维护。 
