Question

我有一个100％宽度的bodyMain div。里面是一个带有自动边距的body div 800px（我可以使用'body'作为id？）。其中有两个divs bodyLeft和bodyRight分别为200px和600px。当我向内部div添加内容时，bodyMain和body都不会在高度上扩展。所有高度都是自动的。

以下是代码：http://jsfiddle.net/TqxHq/18/

HTML：

<body>
    <div id="bodyMain">
      <div id="body">
        <div id="bodyLeft"> left text goes here<br />
        </div>
        <div id="bodyRight">Right text goes here
        </div>
      </div>
    </div>
</body>

CSS：

#bodyMain{
    border:1px solid red;
    width:100%;
    height:auto;

}
#body{
    border:1px solid green;
    width:804px;
    height:auto;
    margin:auto;
}
#bodyLeft{
     border:1px solid blue;
    float:left;
    width:200PX;
    height:auto;
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600PX;
    height:auto;
}

Answer 1

您必须添加

<div style="clear:both;"></div>

在浮动div结束时修复此问题。看到 here

当浮动元素位于容器框内且元素不会自动强制容器的高度调整到浮动元素时，会发生问题。当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除。您可以使用2种方法来修复它：

clear:both
clearfix

Answer 2

使用浮动时这是一个常见问题。有几个常见的解决方案：

在浮动之后添加一个div：clear
将两个浮点数添加到具有CSS属性overflow: auto
使父元素成为浮动
使用CSS后的CSS伪元素：.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
将设定高度添加到父元素

See this article

Answer 3

简单的解决方案是使外部div溢出：隐藏（在样式属性中）。

谢谢

Answer 4

为避免与预定义标记名称混淆，请不要使用body，html或head作为ID属性值。

我同意穆罕默德·伊凡的想法。我不同意他的方法。除小小片外，避免使用内联样式。特别是在这种情况下，因为可能会有另一种需要clear: both的情况。所以，添加一个div，给它一个有意义的类名并应用额外的CSS。

有关示例，请参阅此fiddle。

Answer 5

jsFiddle demo

*{
    margin:0;
    padding:0;
}

#bodyMain{
    position:relative;
    overflow:hidden; /*added*/
    border:1px solid red;
    /*removed height:auto;*/
    /*removed width:100%;*/
}
#body{
    display:table;/*added*/
    border:1px solid green;
    width:804px;
    margin: 0 auto; /*improved*/
}
#bodyLeft{
    border:1px solid blue;
    float:left;
    width:200px;
    /*removed height:auto;*/
}
#bodyRight{
    border:1px solid orange;
    float:right;
    width:600px;
    /*removed height:auto;*/
}

外部div的高度不随内部div扩展

5 个答案:

jsFiddle demo