来自那个小提琴的源代码

Question

我有一种奇怪的情况。我的页面上有两个面板。侧面菜单和主要内容区域。

在该主要内容区域中，我有一个div，而在div内，我浮动另外两个divs。一个在左边，另一个在右边。然后我clear最后两个div，但是容器div和我的侧边菜单一样高。但它们不是嵌套的，所以我不明白为什么以及如何发生这种情况......

以下是演示：

http://jsfiddle.net/9duUt/1/

如果你移除两个泡沫DIV和清除浮子的DIV，那么你会看到容器div的正常尺寸。

为什么当我浮动div时会发生这种情况？

来自那个小提琴的源代码

<div class="sidemenu">
    aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
    aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
</div>

<div class="main-content">
    <div class="top-bar">
        <div class="pull-left">
            <h1><span class="glyphicon glyphicon-th large"></span> Test</h1>
            <h5>Sub title</h5>
        </div>
        <div class="pull-right">
        CHARTS
        </div>
        <div class="fc"></div>
    </div>
</div>

.main-content {
    background: linear-gradient(to bottom, #FCFCFC 0%, #E2E2E2 18%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    height: 100%;
    margin-left: 200px;
    position: relative;
}
.top-bar {
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

h1 {
    font-size: 28px;
}

.fc {
    clear: both;
}

.sidemenu {
    background: none repeat scroll 0 0 #11161A;
    float: left;
    min-width: 200px;
    position: relative;
}

Answer 1

这是因为.fc clear class也清除了你的侧边栏，它也恰好是左侧浮动的 - 尽管.sidebar没有嵌套在.main-content内（因为.fc就是overflow: hidden; 3}}属性工作） - 删除.top-bar标记并将.top-bar { box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.5); overflow: hidden; padding: 10px 15px; }应用于both（为其浮动的后代提供新的clear）将为您提供行为你可能期望的。你也摆脱了不必要的加价。

{{1}}

Block Formatting Context

http://jsfiddle.net/9duUt/4/的{{1}}值的定义：

<强>两个

要求框的顶部边框边缘位于源文档中较早的元素所产生的任何右浮动和左浮动框的底部外边缘下方。

Answer 2

所以，看起来你的主要内容可能只是向左浮动，没有边缘，以解决这个问题。像这样。

.main-content {
    background: linear-gradient(to bottom, #FCFCFC 0%, #E2E2E2 18%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    height: 100%;
    margin-left: 0;
    float: left;
  }

你可以给它一个特定的宽度来解决问题。

Answer 3

是的，问题出在 fc 类中。看起来它正在清除 sidemenu 的浮动，并且它的高度低于它。这就是你的主要内容增加的原因。无论如何，我认为你应该保留清算，因为这可能会在将来弄乱很多东西。只需将 float：left; 添加到 main-content ，然后删除 margin-left 。之后您必须解决的另一个问题是 main-content 的宽度。我猜你应该放一些静态值。这是你的jsfiddle分叉我的变化：http://jsfiddle.net/krasimir/pxgrt/2/

.main-content {
    background: linear-gradient(to bottom, #FCFCFC 0%, #E2E2E2 18%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    height: 100%;
    width: 300px;
    position: relative;
    float: left;
}

右侧面板随左侧面板增长，即使没有嵌套

来自那个小提琴的源代码

3 个答案: