段落内浮动span未继承部分样式的原因及解决方法

这问题挺典型的，咱们先把背后的原理捋清楚，再给你两种不用直接给span加样式的解决办法：

首先说为什么会出现这种差异：

• color是普通继承属性：不管子元素有没有脱离正常文档流（比如设置了float），只要自身没覆盖这个样式，就会乖乖继承父元素的color值，所以你的span能正常显示绿色。
• text-decoration的规则特殊：它本质是作用于元素内的整个文本行，不是通过普通继承机制传递的。当span设置float后，会脱离原来的文本流，创建自己的块格式化上下文（BFC），这时候父元素p的删除线样式就没法“延伸”到这个脱离流的元素上了，所以span不会显示删除线。

接下来是两种替代方案：

方案1：用伪元素替代浮动的span #

如果你的span内容是固定的，可以把内容放到p的:before伪元素里。伪元素属于p的一部分，哪怕设置了float，也会继承p的text-decoration：

p { 
  text-decoration: line-through; 
  color: green; 
}
p:before {
  content: "Lorem ipsum ";
  float: left;
  height: 2em;
}

对应的HTML可以简化成：

<p>dolor sit amet...</p>

方案2：用Flex布局替代Float #

如果需要保留span的结构，把p改成Flex容器就行。既可以实现类似float的左对齐效果，又能让span正常继承text-decoration：

p { 
  text-decoration: line-through; 
  color: green; 
  display: flex;
  align-items: flex-start; /* 让span顶部对齐，模拟float的垂直位置 */
}
span { 
  height: 2em; 
  margin-right: 0.5em; /* 可选，和原float效果保持一致的间距 */
}

HTML保持不变：

<p><span>Lorem ipsum </span> dolor sit amet...</p>

这两种方法都不用直接给span加text-decoration样式，靠调整布局就让样式自然生效啦～

内容的提问来源于stack exchange，提问作者PonyFlare