浮动导致表格边框错位的根源是父容器高度坍缩，使表格渲染位置异常；须先给浮动元素的直接父容器添加clearfix或改用flex布局以恢复文档流，再设置border-collapse: collapse才有效。
浮动本身不会直接导致表格边框“不重合”，真正出问题的是浮动引发的父容器高度坍缩，让表格被错误地挤进塌陷空间里——此时你看到的“边框错位”“边框断开”“表格上浮”，其实根本不是 border-collapse 失效，而是表格压根没在它该在的位置渲染。
为什么给table加clear:both还是不管用
很多人试过在 <table> 上加 <code>clear: both，发现表格依然偏移或边框视觉断裂。这是因为 clear 只控制元素自身与**前面浮动兄弟元素**的垂直位置关系，它不修复父容器高度为 0 的事实。如果表格的直接父容器（比如一个 <div class="content">）内部有 <code>float: left 的侧边栏但没清除，那整个 .content 高度就是 0 —— 表格再怎么 clear，也是“悬浮”在一片空白里。
- 检查浏览器开发者工具中该父容器的 computed height，大概率是
0px -
clear: both必须放在所有浮动子元素之后，且不能写在浮动元素内部 - 仅靠
clear无法让父容器重新包裹内容，它只是避让，不是撑开
border-collapse 起作用的前提是表格先“站稳”
border-collapse: collapse 是纯渲染行为，只对已正确布局的表格生效。如果表格因父容器塌陷而错位、换行、甚至被部分遮挡，那无论你怎么调 border、padding 或 border-spacing，都只是在错误位置上修边角。
- 必须先确保表格所在 DOM 位置稳定：给浮动元素的**直接父容器**加
.clearfix或设display: flow-root - 确认
table元素本身有border-collapse: collapse，且所有td/th明确设置了border（比如1px solid #ccc） - 避免在
tr上设border——它在collapse模式下不参与边框合并，纯属无效代码
浮动干扰下的边框视觉异常，常被误认为是 collapse 问题
实际调试中，很多所谓“边框没合并”，其实是浮动残留影响了盒模型计算：比如父容器用了 overflow: hidden 强撑高，却意外裁剪了表格的 box-shadow 或下拉菜单；又或者浮动列宽度 + margin + border 总和超出了容器，导致表格被迫换行，相邻单元格边框自然就接不上了。
- 统一启用
box-sizing: border-box，避免width + padding + border溢出 - 用
display: flex替代浮动布局（尤其两栏/多列场景），从根源消除塌陷风险 - 若必须兼容 IE8–，
.clearfix::after必须带display: table，否则 IE 下伪元素不触发 BFC
最常被忽略的一点：border-collapse 再正确，也救不了一个没被父容器“托住”的表格。先 fix layout，再调样式，顺序错了，所有 CSS 都是在给幻影修边框。
