html – 外部div的高度不会与内部div扩展

前端之家收集整理的这篇文章主要介绍了html – 外部div的高度不会与内部div扩展前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个bodyMain div宽度为100%。内部是一个具有自动边距的body div 800px(可以使用“body”作为id吗?)。里面是两个div的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;
}

解决方法

你必须添加
<div style="clear:both;"></div>

在浮动结束时解决这个问题。看到
here

当浮动元素位于容器框内并且元素不会自动强制将容器的高度调整为浮动元素时,会出现问题。当一个元素浮动时,它的父代不再包含它,因为浮动是从流中移除的。您可以使用两种方法解决它:

clear:both
clearfix
原文链接:https://www.f2er.com/html/233031.html

猜你在找的HTML相关文章