浮动时间轴连线对不齐的根本原因是浮动导致父容器高度塌陷，使伪元素定位基准错乱；应改用 display: flow-root 或 flex 布局，并将连线置于容器上居中绘制。
浮动时间轴的连线为什么总对不齐
用 float: left 排节点本身没问题，但伪元素（比如 ::before）画横线时，常常偏高、偏低或断开——根本原因是浮动元素脱离文档流后，父容器高度塌陷，导致伪元素的定位基准错乱。
实操建议：
- 给时间轴容器加
overflow: hidden或display: flow-root，强制它包裹住浮动子项（推荐后者，语义更清晰） - 伪元素必须作用在容器上（不是每个节点），否则每条线都得单独算位置，极易错位
- 连线用
border-top比::before更稳：直接设在容器顶部，不受浮动干扰
示例：
.timeline { display: flow-root; border-top: 2px solid #ccc; padding-top: 10px; }
时间节点用 float:left 的兼容性陷阱
IE8+ 支持 float: left，但现代项目里真正要防的是「浮动清除不干净」引发的后续布局崩溃，尤其当时间轴后面紧跟其他区块时。
实操建议：
- 每个节点末尾必须加
clear: both的清除元素（如<div style="clear:both"></div>），或者用::after清除（注意content: ""不可省） - 别依赖
margin-left控制节点间距——浮动下外边距合并不可控；改用padding-right或margin-right（但要预留最后一项的额外处理） - 移动端需加
min-width: 0防止文本撑破容器（尤其长标题）
伪元素画线时 top / left 值怎么算才准
想让线从第一个节点中心连到最后一个，直接写 top: 0 是错的——因为节点本身有高度，连线应该居中于节点纵向中点，而不是顶边。
实操建议：
- 把连线伪元素放在容器上，
top: 50%+transform: translateY(-50%)居中 - 节点宽度要固定（如
width: 120px），否则left和right无法精准控制起止位置 - 如果节点宽度不一，放弃绝对定位，改用
flex替代浮动——这不是退让，是避免掉进计算深渊
示例：
.timeline::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #999; transform: translateY(-50%); }
为什么现在更推荐用 flex 而不是 float 做时间轴
浮动本质是为文字环绕设计的，强行用来做布局，会触发大量隐式行为：外边距合并、清除逻辑、基线对齐问题……而时间轴恰恰需要稳定、可预测的顺序与对齐。
实操建议：
- 用
display: flex+justify-content: space-between直接撑开节点，无需浮动和清除 - 连线改用
flex容器的border-bottom或子项之间的::after生成分隔线 - 仅当必须支持 IE9 及以下时，才退回浮动方案；否则，别给自己埋坑
真正容易被忽略的点：时间轴一旦涉及响应式（比如小屏堆叠），浮动方案需要整套媒体查询重写，而 flex-direction: column 一行就搞定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
