Question

    <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-sidebar和.content-main完全处于不同的上下文中。

所以我认为.content-main上的margin-right：30px可以工作。

但是它仅在.content-sidebar（左边距为margin）中起作用。

编辑））

plus，我使用chrome开发工具进行了检查，并且main div上的margin-right与浏览器进行了交互。（不适用于侧边栏）。但浮动的侧边栏与主要div互动。为什么呢？。？

Answer 1

首先要指出的是：

溢出隐藏属性在.content-main中创建了新的块格式化上下文，因此.content-sidebar和.content-main完全处于不同的上下文中。

那是不正确的。 overflow hidden属性为其内容建立新的块格式化上下文。它不会影响它所在的上下文。因此，.content-sidebar和.content-main处于同一上下文中。这与下面的引用有关。

CSS 2.2 section 9.5 Floats说：

表的边框，块级替换的元素或正常流程中建立新块格式上下文的元素（例如具有“溢出”而不是“可见”的元素）不得与与元素本身相同的块格式上下文中的任何浮点数的margin框。如有必要，实现应通过将所述元素放置在任何先前的浮标下方来清除该元素，但如果有足够的空间，可以将其放置在此类浮标附近。他们甚至可以使该元素的边框比第10.3.3节定义的窄。

在这里，我们有“不得与任何浮标的边距框重叠” ，这就是为什么侧边栏左侧的边距将主要部分与之隔开的原因。但是，我们还“使所述元素的边框变窄” -请注意，边框而不是边距框，因此不需要放置main的边距，使其与浮动的侧边栏。

左右浮动边距以不同的方式处理上浮div

1 个答案: