border-right 在浮动元素上常“看不见”是因为父容器高度塌陷裁剪、宽度超限溢出、ie 渲染 bug 及盒模型计算冲突；推荐用 ::after 伪元素模拟分隔线或直接采用 flex/grid 布局。
浮动元素加分割线，直接用 border-right 很容易出错——它常被父容器裁掉、在 IE 中渲染异常，或与相邻浮动项重叠。更稳的解法是用伪元素 ::after 模拟分隔，或改用现代布局替代浮动本身。
为什么 border-right 在浮动元素上经常“看不见”
常见现象：给 float: left 的 li 或 div 加了 border-right: 1px solid #eee，结果右边线没显示，或只显示半截。
- 父容器未清除浮动（
overflow: hidden或::after清除），导致高度塌陷，border-right被裁在可视区外 - 浮动元素宽度 +
border-right宽度 > 父容器宽度，造成最后一项换行或溢出 - IE8 及更早版本对浮动元素的
border渲染有 bug，尤其当元素无内容或仅含空格时 -
border-right会参与盒模型计算，若同时设了padding或margin，容易误判可用空间
用 ::after 伪元素安全添加右侧分隔线
不依赖元素自身边框，绕过浮动盒模型限制，兼容性好（IE8+），且可精确控制位置和长度。
示例场景：横向排列的导航菜单项，每项右侧需要一条竖线，但最后一项不要：
.nav-item {
float: left;
}
.nav-item::after {
content: "";
display: block;
width: 1px;
height: 60%;
background: #ddd;
margin: 0 0 0 12px;
}
.nav-item:last-child::after {
display: none;
}
- 用
height: 60%避免撑高整个行，比border-right更可控 -
margin-left替代border-right的间距逻辑，不干扰原有尺寸 - 必须配合
display: block，否则height和margin不生效 - 若父容器高度不确定，改用
position: absolute+top: 50%+transform: translateY(-50%)垂直居中
真正该考虑的：是否还值得用浮动做分割线
浮动本就不是为列表/分隔场景设计的，强行用它加线等于在技术债上叠技术债。
- Flex 布局下，
gap可直接控制项间间距，border-right只需加在:not(:last-child)上，语义清晰、无清除烦恼 - Grid 布局中，用
grid-column-gap或列轨道线（grid-column: span 2+ 单独分隔轨道）更直观 - 如果必须兼容 IE9 及以下，优先选伪元素方案，而不是硬调
border-right+ 各种 hack - 移动端高 DPR 屏幕下，
1px边框易模糊，伪元素配合transform: scaleY(0.5)更可靠
浮动加分割线这件事，难点不在“怎么画”，而在“怎么不让它突然消失”。越早把浮动换成 Flex 或 Grid，越少在 overflow:hidden 和 zoom:1 里反复调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
