代码之家 › 专栏 › 技术社区 › jwkoo

右边距和左边距对溢出浮点div的作用不同

overflow css-float css

jwkoo · 技术社区 · 8 年前

    <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完全位于不同的上下文中。

所以我想应该是30像素左右。内容主屏幕就可以了。

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

编辑)

另外,我用chrome开发工具检查过,main div上的margin与浏览器交互。(不带侧边栏)。但是浮动侧边栏与主分区交互。为什么…?

1 回复 | 直到 8 年前

Alohci 8 年前

首先要指出的是你说:

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

这是不正确的这个 overflow hidden 属性建立新的块格式上下文。 因为它的内容 . 它不会影响它所处的上下文。所以 .content-sidebar 和 .content-main 都在同一个上下文中。这与下面的报价有关。

CSS 2.2 section 9.5 Floats 说:

表的边框、块级替换的元素或建立新块格式上下文的正常流中的元素(例如具有“溢出”而不是“可见”的元素)不能与元素本身位于同一块格式上下文中的任何浮动的边距框重叠。如有必要,实现应通过将所述元素放置在任何前面的浮点数之下来清除该元素,但如果有足够的空间,则可以将其放置在这些浮点数旁边。它们甚至可以使所述元素的边框比第10.3.3节定义的更窄。

给你 “不能与任何浮动的边距框重叠” 这就是为什么侧边栏上的左边距将主部分隔开的原因。但我们也有 “使所述元素的边框更窄” -注意边框,而不是边距框,所以不需要定位main的边距,这样它就不会与浮动的侧边栏重叠。