::after清浮动下划线易失效是因为它默认为行内元素，不参与BFC构建且无法撑开父高；必须设display:block和clear:both才能真正清除浮动并使border-bottom正常显示。
为什么 ::after 清浮动下划线容易失效
因为 ::after 默认是行内元素，不参与 BFC 构建，也无法撑开父容器高度；如果父元素没设 overflow 或其他 BFC 触发条件，浮动子元素仍会脱离文档流，导致下划线位置错乱或完全消失。
- 常见错误现象：
border-bottom出现在浮动元素上方、断开、只画半截，或整个下划线根本没渲染 - 关键原因：伪元素本身没“清除”能力，它只是个装饰节点，必须配合
clear: both+display: block才能真正起作用 - 别指望只靠
content: ""就能清浮动——那只是生成了个空节点，没布局行为
::after 清浮动下划线的最小可靠写法
核心不是“加个伪元素”，而是让这个伪元素承担清除职责，并把下划线视觉绑定到它身上。最简且兼容 IE8+ 的写法如下：
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul::after {
content: "";
display: block;
clear: both;
border-bottom: 1px solid #ccc;
margin-top: 0.5em;
}
-
display: block是必须的，否则clear不生效 -
clear: both必须写在伪元素上，不是父元素上 -
border-bottom写在伪元素上，才能随它一起被“撑开”并定位到底部 - 不要用
height: 0或visibility: hidden隐藏伪元素——它需要真实占据空间来触发清除
和 overflow: hidden 方案比，::after 有什么实际区别
两者都能清浮动，但对下划线这类视觉需求，::after 更可控，overflow: hidden 容易意外裁剪内容。
-
overflow: hidden会让position: absolute子元素、阴影、滚动条等被截断，而::after是纯 CSS 插入，不影响原有布局逻辑 - 当父容器需要圆角（
border-radius）时，overflow: hidden会把圆角内的下划线也裁掉；::after的边框则可自由定位，不受影响 - 性能上无显著差异，但
::after多一个 DOM 节点（虚拟），现代浏览器基本无感
移动端适配和 line-height 冲突怎么处理
下划线紧贴文字底部时，常因 line-height 过大导致距离失真，尤其在响应式场景下更明显。
立即学习“前端免费学习笔记（深入）”；
- 别直接给伪元素设
line-height——它没文本内容，该属性无效 - 用
margin-top或padding-bottom控制下划线与文字间距，数值建议用em单位，如margin-top: 0.3em - 如果父元素用了
font-size: 0清除 inline 元素间隙，记得在伪元素里重置font-size，否则em计算会出错 - iOS Safari 对
::after的border-bottom渲染有时偏细，可用transform: scaleY(1.2)微调（慎用，仅限必要时）
浮动本身在现代布局中已少用，但只要还在用 float 做行内对齐或老式栅格，这个伪元素方案就是最轻量、最不易破的下划线绑定方式——前提是记住：它不是装饰，是清除动作的一部分。
