对于溢出浮动div，右边界和左边界的工作方式不同

2022-03-21 00:00:00 overflow css css-float

    <body>
        <div class="content">
           <div class="content-sidebar">
                content-sidebar
            </div>
            <div class="content-main">
                content-main
            </div>
        </div>
    </body>

上面是html代码，下面是css代码。

body {
    margin: 0;
    padding: 0;
}

.content {
    background-color: yellow;
}

.content-sidebar {
    background-color: red;
    float: right;
    margin-left: 30px;
}

.content-main {
    background-color: green;
    height: 300px;
    overflow: hidden;
}

溢出隐藏属性在.content-main中创建新的挡路格式上下文，因此.content-侧栏和.content-main位于完全不同的上下文中。

所以我认为.content-main上的右页边距：30px会起作用。

但它只能在.content-侧边栏(左边距)中工作。

编辑))

另外，我使用Chrome开发工具进行了检查，主div的右边距与浏览器交互。(不是使用侧边栏)。但是浮动侧边栏与主div交互。为什么..？

解决方案

首先要指出的是您说：

溢出隐藏属性在.content-main中创建新的挡路格式上下文，因此.content-侧栏和.content-main位于完全不同的上下文中。

这是不正确的。overflow hidden属性为其内容建立新的挡路格式上下文。它不会影响它所处的上下文。因此.content-sidebar和.content-main处于相同的上下文中。这与下面的报价相关。

CSS 2.2 section 9.5 Floats表示：

表的边框、挡路级别的替换元素或正常流中建立新挡路格式上下文的元素(例如，具有不同于"Visible"的""overflow""的元素)不得与与元素本身相同的挡路格式上下文中的任何浮点数的边框重叠。"如有必要，实现应通过将上述元素放在任何前面的浮点数下面来清除它，但如果有足够的空间，也可以将其放在此类浮点数的附近。它们甚至可能使所述元素的边界框比第10.3.3节定义的窄。

这里我们有"不得与任何浮动的页边距框重叠"，这就是为什么侧边栏上的左边距将主要部分与其隔开。但我们还有"使所述元素的边框更窄"-请注意边框，而不是边框，因此不需要定位Main的页边距，使其不与浮动的侧边栏重叠。

相关文章