浮动元素下划线“断开”是因脱离标准流导致行框断裂，text-decoration依赖完整行框绘制；box-shadow位置异常实为父容器塌陷引发视觉错位；text-shadow可正常使用，不受浮动影响。
浮动元素的下划线为什么“断开”或“消失”
因为 float 会让元素脱离标准流，同时其行内盒（inline box）上下文被破坏，而 text-decoration: underline 是由**行框（line box）统一绘制**的——一旦父容器无法形成连续的行框（比如子元素全浮动、父高度塌陷），下划线就失去绘制依据。
- 常见现象：给
<a></a>或<span></span>加了float: left，文字还在，但下划线只剩半截甚至完全不见 - 本质不是“下划线被删”，而是浏览器找不到该文本所属的完整行框来渲染装饰线
- 解决思路不是硬加
display: inline-block（它不解决行框断裂），而是让浮动元素回归行内上下文，或改用伪元素模拟下划线
box-shadow 在浮动盒子上为何“看起来偏移异常”
box-shadow 本身不受浮动影响——它始终相对于元素的 border box 计算。但你感觉“偏了”，往往是因为浮动后父容器高度塌陷，导致后续兄弟元素上移，视觉上阴影和相邻内容错位。
- 典型场景：两个并排浮动的卡片都带
box-shadow，但下方文字紧贴第一个卡片底部，阴影却被第二个卡片“盖住” - 根本原因不是阴影计算错，而是浮动父容器没撑开，造成布局层叠混乱
- 必须配合清除浮动（如
.clearfix::after）或 BFC 触发（如overflow: hidden），才能让阴影在预期位置呈现 - 注意：
box-shadow不占空间，所以即使父容器塌陷，阴影仍会渲染，只是容易被误判为“位置错误”
text-shadow 能否在浮动文字上正常使用
可以，而且完全不受浮动影响。text-shadow 是逐字符渲染的，只依赖字体度量和当前文本样式，与定位方式无关。
- 放心用：
a:hover { text-shadow: 1px 1px 2px rgba(0,0,0,.5); }+float: right没问题 - 唯一要注意的是：如果浮动元素父容器宽度不足导致文字换行，
text-shadow会随每行文字独立绘制，不会跨行连贯——这不是 bug，是设计行为 - 别试图用
text-shadow模拟下划线（模糊+偏移效果差、可访问性低），那是border-bottom或伪元素的事
真正容易被忽略的兼容性陷阱
IE8 及更早版本不支持 box-shadow 和 text-shadow，但更隐蔽的问题是：某些旧版 Android WebView（4.3 及之前）中，对浮动元素应用 border-radius 同时加 box-shadow，会导致阴影被裁切——不是 CSS 写错了，是渲染引擎把浮动盒子当成了“无边界裁剪区”。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：给浮动容器加
overflow: hidden，阴影突然出现 → 就是这个 bug - 现代项目可忽略 IE8，但若需兼容 Android 4.x，建议避免在浮动元素上同时使用
border-radius和box-shadow - 另一个隐形坑：
float元素设vertical-align无效，所以别指望靠它微调带text-shadow的文字基线对齐
