为什么跟在浮动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中的overflow:scroll移除会导致它的行为像breadcrumbsContainer。

• 相反地，将overflow:scroll（overflow:hidden）添加到breadcrumbsContainer会导致它的边框框调整到我期望的位置。

问题

1. 为什么breadcrumbsContainer的边框框不在我期望的位置开始，但是breadcrumbsContainer中包含的文本基本上在我期望的位置？

2. 设置这样的布局的“正确方法”是什么，以使breadcrumbsContainer和.main div不重叠侧边栏，但随着浏览器窗口的调整而调整大小？

我可以使用绝对定位和jQuery resize()事件轻松完成它，但似乎不需要那样做。

谢谢。

- MindJuice

---

我会使用绝对定位来进行这种布局。 - Ke Vin

我也会尝试一下。谢谢。 - MindJuice

Answer 1

float属性可以使元素脱离正常文档流，这意味着相邻元素的位置会忽略该元素（这也是为什么.breadcrumb-container会重叠..它忽略了同级元素的盒子）。

但如果一个元素具有内联显示，则情况就不同。

由于文本是内联的，它会考虑到float属性的存在，并且因此紧贴其右侧边缘 - 这是预期的行为，因为文本应该围绕浮动元素排列。

- Anonymous

---

谢谢，这回答了为什么文本行为不同的部分。 - MindJuice

Answer 2

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

你不能让下一个div在使用float: left规则后没有float规则。例如，像你的下一个div类是breadCrumbsContainer。它没有float规则。因此，你需要为.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框架。

- Still Newbie

---

你的第二个例子表现得很好，我希望侧边栏是固定宽度的。谢谢。 - MindJuice

我正在使用Bootstrap来处理一些东西（表格，按钮），但我还没有找到一种方法来复制这个布局。虽然这是我的第一个Bootstrap项目，但我仍在逐渐熟悉它。 - MindJuice

如果需要，您可以进行嵌套网格。例如，如果您已经有了<div class='row><div class='col-md4'>，您可以在其中再添加<div class='row><div class='col-md4'>。网格宽度规则是从父DOM按百分比计算的。 - Still Newbie

Answer 3

由于它仍然锚定或定位到窗口的左边缘，但div本身或内容直到侧栏后才开始。当您检查它时，滚动行为是区分两者的关键，因为滚动条会强制文档指出该div没有完全对齐左侧。基本上，您正在获得正确的功能，只是遇到了CSS的奇怪之处。

- Wobbles

---

设置overflow:hidden也有相同的效果，所以它不是特指滚动条。我认为它将浮动div下方的breadcrumbsContainer部分视为溢出区域，因此将其修剪掉。 - MindJuice