清除浮动后兄弟元素间距异常主因是外边距合并或html空白字符渲染，非clear失效；空清除元素未触发bfc会成为margin穿透通道；浮动项间4px间隙源于换行符作为空格被渲染；末项多余空白因统一设margin-right所致，应改用.item + .item或.item:last-child修正。
清除浮动后兄弟元素间距异常，基本不是 clear 没生效，而是外边距合并（margin collapse）暴露了，或者 HTML 空白字符仍在渲染——这两者常被误认为是“浮动残留问题”。
为什么 clear:both 后 margin-top 看起来失效了
空的清除元素（比如 ::after 或 <div class="clear"></div>）若没触发 BFC，就会成为上下 margin 的“穿透通道”。上方块级元素的 margin-top 和它再上一个兄弟的 margin-bottom 合并，结果只显示较大值，视觉上就像消失了。
- 用开发者工具检查目标元素的 computed
margin-top，如果显示为0px或标灰，大概率是被合并了 -
clear: both本身不创建 BFC，必须额外加display: flow-root、overflow: hidden或border-top才能阻断 - 在父容器上直接加
display: flow-root是最干净的解法：既包裹浮动子项，又天然隔离内部 margin
为什么浮动元素之间还有 4px 间隙
这不是浮动导致的，是 HTML 换行符被解析成空格字符（U+0020），在父容器 font-size: 16px + 默认 line-height 下撑开约 4px 宽度。这个空格存在于行内格式化上下文（IFC）中，和浮动无关。
- 打开开发者工具，选中父容器，在 Computed 面板确认
font-size和line-height是否继承非零值 - 快速验证：右键父容器 → “Edit as HTML”，把子元素压成一行：
<div class="item"></div> <div class="item"></div>，刷新看间隙是否消失 - 若不能改 HTML（如 Vue 编译输出），可设父容器
font-size: 0，但所有子元素必须显式重置font-size，漏一项文字就消失
为什么最后一项右边总多出空白
这是逻辑必然：给每个浮动项都设 margin-right: 10px，末项也照加。它不是 bug，是你没排除最后一个。
- 推荐用相邻兄弟选择器：
.item + .item { margin-left: 10px; }，天然跳过首项 - 若坚持用
margin-right，必须补一句：.item:last-child { margin-right: 0; } - 避免混用
margin-left和margin-right，尤其在 IE 中可能因渲染顺序产生双倍边距
真正麻烦的点在于：这些现象常叠加出现——比如父容器没触发 BFC 导致塌陷，同时 HTML 有换行，又统一用了 margin-right，调试时容易反复试错。优先用 display: flow-root + .item + .item 组合，能绕过绝大多数陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
