18

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

这是代码：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;
}
4

5 回答 5

42

您必须添加

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

在浮动 div 结束时解决此问题。看 这里

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

clear:both
clearfix
于 2012-04-14T15:52:17.573 回答
8

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

  1. 使用 clear: both 在浮动后添加一个 div

  2. 将两个浮点数添加到具有 CSS 属性的容器中overflow: auto

  3. 使父元素浮动

  4. 将 :after CSS 伪元素与 CSS 一起使用：.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

  5. 向父元素添加设置高度

看这篇文章

于 2012-04-14T15:55:55.170 回答
3

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

谢谢

于 2016-07-05T07:28:57.030 回答
2

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

我同意 Muhammed Irfan 的想法。不过我不同意他的方法。避免使用内联样式，除了小片段。尤其是在这种情况下，因为很可能会有另一种情况clear: both是必要的。所以，添加一个 div，给它一个有意义的类名并应用额外的 CSS。

有关示例，请参见此小提琴。

于 2012-04-14T16:00:13.723 回答
2

jsFiddle 演示

*{
    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;*/
}
于 2012-04-14T16:04:54.173 回答