清除浮动后margin-top失效是因外边距折叠，非代码错误；应优先在父容器用display:flow-root触发BFC阻断合并，或加border-top/padding-top防折叠，避免滥用clear:both。
清除浮动后 margin-top 不生效怎么办
这不是 margin 写错了，而是浮动元素脱离文档流，导致后续块级元素的 margin-top 与前一个非浮动兄弟元素（比如浮动项本身）的 margin-bottom 发生折叠——浏览器把它俩合并成一个边距，视觉上就“失效”了。
- 最直接验证方式：打开开发者工具，检查目标元素的盒模型，看
margin-top是否被标灰或显示为“collapsed” - 不要给浮动元素加
clear来“撑开”间距，这会强制换行，破坏并排布局 - 优先在父容器上触发 BFC：
overflow: hidden或更现代的display: flow-root，能阻断 margin 折叠，让margin-top按预期渲染 - 如果必须保留旧写法，给紧接在浮动后的元素加
border-top: 1px solid transparent或padding-top: 0.1px，也能阻止折叠
浮动项之间统一边距怎么设才不露馅
常见错误是每个浮动项都设 margin-right: 10px，结果最后一个右边多出 10px 空白。这不是 bug，是逻辑必然——你没排除末尾项。
- 推荐写法：
.item + .item { margin-left: 10px; }，只对第二个及之后的项生效，天然避开第一个 - 若用
margin-right，必须补一句：.item:last-child { margin-right: 0; } - 避免混用
margin-left和margin-right在不同浮动项上，IE 中可能因渲染顺序导致双倍边距 - 所有浮动项统一用
box-sizing: border-box，防止 padding 干扰宽度计算，让边距更可控
清除浮动后底部多出空白怎么精准消除
那截空白通常不是 clear 本身造成的，而是清除节点（比如 ::after）作为块级元素，默认带 margin、line-height 或继承了父容器字体大小，悄悄撑开了高度。
- 伪元素清除必须写全：
.clearfix::after { content: ""; display: block; clear: both; height: 0; font-size: 0; line-height: 0; visibility: hidden; } - 如果用了真实 DOM 清除节点（如
<div class="clear"></div>），务必重置：.clear { height: 0; margin: 0; font-size: 0; line-height: 0; } - 别依赖
font-size: 0父容器来“吸走”间隙——它会让内部文字消失，除非子元素显式重设font-size - 移动端尤其要注意：清除后空白常和
viewport缩放、系统字体最小尺寸限制叠加，建议用height: 0.1px替代height: 0更稳妥
为什么现在还手动清浮动就是给自己挖坑
浮动本就不是为布局设计的，它只是个文本环绕遗留特性。你调边距、清浮动、防塌陷、躲双倍 margin……全是补丁套补丁。
立即学习“前端免费学习笔记（深入）”；
- 单行多列？直接用
display: flex+gap，边距语义清晰、无折叠、响应式原生支持 - 网格布局？
display: grid的grid-gap或gap一行解决所有间距问题 - 兼容性真要命？
display: flow-root（Chrome 64+/Firefox 58+）比overflow: hidden更干净，不裁剪溢出内容 - IE8–？那就老老实实用
overflow: hidden，但得接受它可能意外裁掉 tooltip 或 dropdown
真正难的不是怎么修 float 的边距，而是敢不敢把 float 从布局逻辑里彻底删掉。
