为什么浮动的div后面的div与浮动的div重叠?

I have a floated left sidebar layout with breadcrumbs and main content area on the right.

我有一个浮动的左侧边栏布局与面包屑和主要内容区域在右边。

If you Inspect Element on the breadcrumbsContainer (see jsFiddle), you can see that its left edge is all the way at the left edge of the browser window, but I expected it would be at the right edge of the sidebar.

如果您检查breadcrumbsContainer上的元素(请参阅jsFiddle)，您可以看到它的左边缘一直位于浏览器窗口的左边缘，但是我希望它位于工具条的右边缘。

I see that there are several other similar questions, but I haven't been able to find one yet with the same issue or an answer.

我看到还有几个类似的问题，但我还没有找到一个有同样的问题或答案。

Here is the HTML:

HTML:

<div>
    <div id="sidebar">
        <div class="menuItem">Users</div>
        <div class="menuItem">Settings</div>
    </div>
    <div class="breadcrumbsContainer">
        Breadcrumbs go here
    </div>
    <div class="main">
    Main content goes here
    </div>
</div>

Here is the CSS:

CSS:

#sidebar {
    float: left;
    width: 200px;
}

.menuItem {
    height: 60px;
    border-top: 1px solid white;
    background: lightBlue;
}

.breadcrumbsContainer {
    height: 24px;
    background: lightGrey;
}

.main {
    background: #f5f5f5;
    overflow: scroll;
}

jsFiddle

http://jsfiddle.net/LCdwV/2/

http://jsfiddle.net/LCdwV/2/

Notes

• The following .main div is positioned as I expected.

  下面的.main div按我的预期定位。

• While simplifying the situation for my jsfiddle, I discovered that removing the overflow:scroll from the .main div caused it to behave like the breadcrumbsContainer.

  在简化我的jsfiddle的情况时，我发现删除溢出:从.main div中滚动，导致它的行为像breadcrumbsContainer。

• Conversely, adding overflow:scroll (overflow:hidden) to the breadcrumbsContainer caused its bounding box to adjust to where I expected it to be.

  相反，向breadcrumbsContainer添加溢出:滚动(溢出:隐藏)，使其边界框调整到我预期的位置。

Questions

1. Why does the bounding box of breadcrumbsContainer not start where I expect, and yet the text contained in the breadcrumbsContainer is pretty much where I expect it to be?

   为什么面包面包屑容器的边框没有在我期望的地方开始，而面包屑容器中包含的文本却在我期望的地方?

2. What is the "right way" to setup a layout like this so that the breadcrumbsContainer and .main div don't overlap the sidebar, but also resize as the browser window resizes?

   设置这样的布局的“正确的方法”是什么，这样就可以使breadcrumbsContainer和.main div不重叠侧边栏，但是在浏览器窗口大小调整时也可以调整大小。

I could do it easily with absolute positioning and the jQuery resize() event, but it seems like it should be possible without that.

我可以通过绝对定位和jQuery resize()事件轻松完成，但似乎不需要这样做也可以。

Thanks.

谢谢。

3 个解决方案

#1

I checked your code and here's my solution:

我查了你的密码，我的解决办法是:

you cannot let the next div after you had a float: left rule to not having float rule. for example like your next div class is breadCrumbsContainer. It has no float rule. So, you need to define float: left for .breadCrumbsContainer and main. But there is an issue with the width of the div, it will fits to its content.

您不能让下一个div在您有一个浮动:左规则到没有浮动规则之后。例如，下一个div类是breadCrumbsContainer。它没有浮动规则。因此，您需要定义float: left for . breadcrumbscontainer和main。但是这个div的宽度有一个问题，它将与它的内容相匹配。

I recommend you to add your layouting rule first. so it looks like this :

我建议你先加上你的洗衣规则。看起来是这样的:

#sidebar {
    float: left;
    width: 20%;
}

.menuItem {
    height: 60px;
    border-top: 1px solid white;
    background: lightBlue;
}

.breadcrumbsContainer {
    float: left;
    width: 80%;
    height: 24px;
    background: lightGrey;
}

.main {
    float: left;
    width: 80%;
    background: #f5f5f5;
    overflow: scroll;
}

Otherwise, you can also set your sidebar position to be absolute and you can create a div to wrap your main content

否则，您还可以设置侧栏位置为绝对，您可以创建一个div来包装您的主要内容。

CSS :

CSS:

#sidebar {
    position: absolute;
    width: 200px;
}
.main-container{
    position: relative;
    left: 200px;
}
.menuItem {
    height: 60px;
    border-top: 1px solid white;
    background: lightBlue;
}

.breadcrumbsContainer {
    height: 24px;
    background: lightGrey;
}

.main {
    background: #f5f5f5;
    overflow: scroll;
}

HTML :

HTML:

<div>
    <div id="sidebar">
        <div class="menuItem">Users</div>
        <div class="menuItem">Settings</div>
    </div>
    <div class="main-container">
        <div class="breadcrumbsContainer">
            Breadcrumbs go here
        </div>
        <div class="main">
        Main content goes here
        </div>
    </div>
</div>

It's very recommended to look at bootstrap framework

非常推荐使用bootstrap框架

#2

float removes an element from the normal flow, meaning that neighboring elements are positioned as if the float didn't exist (which is why .breadcrumb-container is overlapping .. it ignores the box of its sibling).

float从正常流中移除一个元素，这意味着相邻的元素被定位为仿佛该float不存在(这就是.breadcrumb-container被重叠的原因)。它忽略了它的同胞)。

This isn't the case if an element has an inline display.

如果元素具有内联显示，则不是这样。

Since the text is inline, it respects the presence of this float, and thus is placed flush against its right edge - this is the intended behaviour since text was meant to wrap around floated elements.

由于文本是内联的，因此它尊重这个浮动的存在，因此将其置于其右边缘——这是预期的行为，因为文本旨在围绕浮动元素。

#3

Because its still anchored or positioned to the left edge of the window, but the div itself or content does not begin until after the sidebar. The scroll behavior is what is differentiating the two when you inspect it as the scroll bars force the document to say that the dive does not sock all the way to the left. Basically you are getting the correct functionality, you have just reach upon one of the oddities of css

因为它仍然锚定或定位在窗口的左边缘，但是div本身或内容直到侧边栏之后才开始。当您查看滚动条时，滚动行为是区分这两种行为的原因，因为滚动条会迫使文档说俯冲不会一直向左边移动。基本上，您得到的是正确的功能，您只需触及css的一个奇怪之处