浮点元素可以从其包装器元素继承背景颜色

<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>

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

color 属性在 CSS 标准中定义，如果未设置，则从父级继承（请注意"继承：是"部分）。background-color属性不是（它默认为 transparent ，并且具有"继承：否"）。不过，您始终可以这样做：

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

当您将background-color设置为 inherit 时，它将完全做到这一点。

您可以将overflow:auto;添加到 #wrap 以实现此目的：

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

js小提琴示例

相关内容

最新更新

热门标签：