为何float会破坏text-decoration？Chrome中部分链接下划线不生效的问题咨询

嘿，这个问题我之前也纠结过，咱们先把你的代码摆出来，再慢慢拆解原因：

你的CSS代码：

a {text-decoration: underline;}
a em{float: right}
a i{display: block}

对应的HTML结构：

<a href="#">1st link</a>
<a href="#"><em>2nd link</em></a>
<a href="#"><i>3rd link</i></a>

咱们逐个分析情况：

• 第一个链接完全正常，行内元素a直接应用下划线规则，文本和下划线匹配显示。
• 第二个链接的坑就出在float: right上！浮动元素的核心特性是脱离当前的正常文档流，而CSS规范里有个容易被忽略的细节：父元素的text-decoration（比如这里的下划线）不会作用到浮动的子元素身上，而且因为浮动元素不在正常流里，父元素的下划线也没法“延伸”到它的位置，所以你就看不到下划线了。
• 第三个链接里的display: block虽然把i变成了块级元素，但它没有脱离文档流，依然属于父元素a的内容范围，所以a的下划线规则依然能覆盖到它，自然就正常显示下划线啦。

说白了，float是让元素“跳出”了父元素的文本流范围，而下划线是跟着文本流走的，自然就跟丢了；但块级元素只是换了个显示方式，还在流里，所以下划线能跟上。Chrome的这个表现其实是符合CSS规范的，不是浏览器bug哦～

内容来源于stack exchange