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

margin-right and left works in different way regards to overflow-float divs(对于溢出浮动div，右边界和左边界的工作方式不同)

本文介绍了对于溢出浮动div，右边界和左边界的工作方式不同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

    <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的页边距，使其不与浮动的侧边栏重叠。

这篇关于对于溢出浮动div，右边界和左边界的工作方式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！