浮动元素加 border-right 导致右侧多线，因边框无差别施加于每个元素且:last-child在浮动下失准；稳妥解法是改用 margin-right 模拟间距、伪元素 ::after 精确画线，或直接切换为 flex + gap 布局。
浮动元素加 border-right 为什么右边总多一条线
因为 border-right 是无差别加在每个浮动元素上的，最后一项 DOM 顺序靠后，但视觉上它在最右，却仍被画了右边框。常见错误是写成 .item { float: left; border-right: 1px solid #ddd; }，结果末尾多出一截线。
解决它不能只依赖 :not(:last-child)——浮动打乱文档流后，:last-child 匹配的是 HTML 中最后一个子节点，不一定是视觉最右那个；尤其当用 clear: both 或不同宽度混排时，DOM 顺序和列顺序完全脱钩。
- 稳妥做法：给容器设
overflow: hidden或clearfix，确保浮动元素按预期排列，再用.item:not(:last-of-type)（比:last-child更贴近语义） - 更稳的兜底：改用
margin-right模拟间距，把分割线逻辑从“边框”转移到“空白+背景色”，避免边框归属歧义 - 如果必须用
border-right，且浮动项数量固定，可手动给最后一项加border-right: none
用伪元素 ::after 在浮动元素右侧画线更可控
伪元素脱离文档流，位置由 position: absolute 精确控制，不会受浮动干扰，也不会误加到不该加的地方。关键是要把伪元素挂载在浮动元素内部，而不是父容器上——否则定位基准容易偏移。
典型写法：
.item {
float: left;
position: relative;
}
.item::after {
content: "";
position: absolute;
top: 25%;
right: -15px;
width: 1px;
height: 50%;
background: #ddd;
}
-
top和height配合控制竖线起止位置，避免顶到底拉满（常导致与上下内容粘连） -
right: -15px把线“推”到元素外侧，数值需略大于你想要的左右间距，否则会被裁掉 - 若浮动项高度不一致，
top/height改用transform: translateY(-50%)+top: 50%居中更鲁棒
浮动布局下 vertical-align 对垂直分割线没用
vertical-align 只对 display: inline、inline-block、table-cell 生效，对 float 元素完全无效。很多人试图给浮动元素加 vertical-align: middle 来对齐分割线，结果毫无反应。
真正能影响分割线垂直位置的只有三类属性：
- 伪元素自身的
top/bottom/transform - 浮动元素自身的
line-height（仅当内含行内内容且想借行高对齐时） - 父容器的
padding-top/padding-bottom（间接抬升整个浮动流）
如果你发现分割线偏高或偏低，优先检查伪元素的 top 值是否基于父容器高度计算，而不是浮动项自身高度——它们很可能不一致。
现代替代方案：别用浮动，改用 display: flex
浮动本身不是为横向排列设计的，强行用来做菜单、标签栏、工具按钮组，后续加分割线、对齐、响应式都会越来越拧巴。Flex 布局原生支持 gap，一行解决：
<pre class="brush:php;toolbar:false;">.container {
display: flex;
gap: 16px; /* 自动在每两项之间插入 16px 空白，就是“隐形分割线” */
}
如果非要显性画线，flex 下直接给子项加 border-right
:not(:last-child) 就非常可靠，因为 flex 项的 DOM 顺序和视觉顺序严格一致，:last-child 不会翻车。唯一要注意的是：老版本 Safari（gap，得降级用 margin-right；但即便如此，也比维护浮动 + 伪元素 + 清除浮动的组合技省心得多。
真正难的不是怎么画那条线，而是决定要不要继续让浮动承担它本不该承担的布局责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
