CSS子元素在浮动或对齐时丢失父背景颜色

Question

<span class='parent'>Parent<span class='child'> and child</span></span>

如果我这样做：

.parent {
    background-color: green;
}

所有文字都有绿色背景色。但如果我加上这个：

.child {
   float: right;
}

孩子不再保留这个属性。我可以对孩子做background-color但我需要突出显示两者之间的空格。

有办法做到这一点吗？

Jsfiddle：http://jsfiddle.net/SLWTd/

Answer 1

儿童永远不会自动继承父母的背景颜色。浮动的内容只是在父母的背景上。在这种情况下，父级的背景仅跨越其实际内部文本的数量（不包括浮动内容）。

幸运的是，通过设置结构的方式，您可以明确set the child's background to inherit其父级的值。

.child {
    float: right;
    background-color: inherit;
}

---

如果您希望整行为该颜色，则需要use a block-level element。试试这个：

<div class='parent'><span class='child'> and child</span>Parent</div>