Question

<html>
<head>  
    <style>
        #wrap{
            width: 800px;
            background-color: black;
            color: red;
        }



        #right{
            float: right;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="right">
            <h1>RIGHT</h1>
        </div>
    </div>
</body>

因为在此示例中仅继承了文本颜色而不是背景颜色。有人能解释我为什么吗？

Answer 1

color属性在CSS standards中定义，如果未设置，则从父项继承（请注意“继承：是”部分）。 background-color property不是（默认为transparent，并且“继承：否”）。但是你可以随时这样做：

#right
{
    float: right;
    background-color: inherit;
}

当您将background-color设置为inherit时，它会完全相同。

Answer 2

您可以将overflow:auto;添加到#wrap以完成此操作：

#wrap{
    width: 800px;
    background-color: black;
    color: red;
    overflow:auto;
}

<强> jsFiddle example

浮动元素可以从其包装元素继承背景颜色吗？

2 个答案: