为什么浮动div之后的div与浮动div重叠？

Question

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

如果在breadcrumbsContainer上检查元素(请参阅jsFiddle),您可以看到它的左边缘一直在浏览器窗口的左边缘,但我预计它将位于侧边栏的右边缘.

我看到还有其他几个类似的问题,但我还没有找到一个有相同问题或答案的问题.

这是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>

这是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/

笔记

• 以下.main div按我的预期定位.

• 在简化jsfiddle的情况的同时,我发现删除溢出:从.main div滚动导致它的行为类似于breadcrumbsContainer.

• 相反,添加overflow:scroll(overflow:hidden)到breadcrumbsContainer会导致其边界框调整到我预期的位置.

问题

1. 为什么breadcrumbsContainer的边界框不能从我期望的地方开始,但是breadcrumbsContainer中包含的文本几乎就是我期望的那样？

2. 设置这样的布局的"正确方法"是什么,以便breadcrumbsContainer和.main div不与侧边栏重叠,还会在浏览器窗口调整大小时调整大小？

我可以通过绝对定位和jQuery resize()事件轻松完成,但似乎没有它可能.

谢谢.

Answer 1

我检查了你的代码，这是我的解决方案：

你不能让下一个div在你有一个float: left规则后变成没有float规则。例如，您的下一个 div 类是 breadCrumbsContainer。它没有浮动规则。因此，您需要为 .breadCrumbsContainer 和 main 定义 float: left。但是 div 的宽度存在问题，它会适合其内容。

我建议您首先添加布局规则。所以它看起来像这样：

#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;
}

否则，您还可以将侧边栏位置设置为绝对位置，并且可以创建一个 div 来包裹主要内容

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：

<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>

非常推荐看看bootstrap框架