Question

我的mainContainer高度不符合他们的子宽度

这是我的代码你有什么建议吗请指教。

我需要CSS解决方案而不是JavaScript，所以提前感谢

<div id="mainContainer">
    <div id="leftContent">

    </div>

    <div id="rightContent">

    </div>
</div>

这是我的css

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;
}
#leftContent{
    height: 100px;
    float: left;
    width: 380px;
    background-color: violet;
}
#rightContent{
    height: 100px;
    float: right;
    width: 620px;
    background-color: yellow;
}

Answer 1

将overflow:hidden;添加到容器中：

#mainContainer{
    width: 1000px;
    /*height: 1000px;*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden; /* <--- here */
}

因为它的内容是浮动的，所以容器div崩溃了。使用'clearfix'类，或者如我所提到的，添加overflow:hidden将导致容器包含浮动元素。

更新有关其工作原理的说明，请访问：https://stackoverflow.com/a/9193270/1588648

......在这里：

为了让它们（浏览器）计算溢出块边界的内容（因此应该被隐藏），他们需要知道块的大小。由于这些块没有明确的高度设置，因此浏览器使用计算出的内容高度。

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Answer 2

您需要清除浮动元素，对overflow: hidden;

使用#mainContainer

<强> Demo

替代:(您可以添加clear: both;以清除浮动）

Demo

或者您也可以自行清除浮动元素（仅当您希望支持IE9 = +

时）

.clear:after {
  content: "";
  clear: both;
  display: table;
}

Why this happens?

Answer 3

使用溢出：隐藏并清除浮动

#mainContainer{
    width: 1000px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color: #ff6600;
    padding-bottom: 20px;

    overflow: hidden;
    clear: both;
}

父高不跟随他们的浮子

3 个答案: