CSS 父子高度答案

【问题标题】：CSS Parent-Child heightCSS 父子高度
【发布时间】：2014-02-17 11:22:09
【问题描述】：

我对这些代码 sn-ps 有一些问题：

CSS：

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML：

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

左边的高度是80px，右边的高度是150px。我希望这件事看起来像这样： http://img408.imageshack.us/img408/9978/dream.th.jpg 以上来自 IE 的屏幕截图，当我使用 IE 时，这些 sn-ps 可以完美运行。但是当我使用其他浏览器（opera、FF、Safari、Chrome）时，我得到了这个： http://img408.imageshack.us/img408/869/fact.th.jpg

这并不酷……我希望父 (#wrapper) 元素的高度获得两个子元素的更大高度。

【问题讨论】：

Stack Overflow 以这种方式呈现您的文本（我现在已经对其进行了编辑，所以它不再那样做了），因为它使用 Markdown，而不是 BBCode。
截图现在不见了。存储不耐用。 :(

标签： css height parent

【解决方案1】：

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}

【讨论】：

【解决方案2】：

这是 IE 中的一个错误。

Containing floats 解释了您看到这种行为的原因，而Methods for Containing Floats 提供了比添加额外标记更好的解决方案。

【讨论】：

感谢您的快速回答。我还没有阅读你写的所有内容（两个链接），但我在第二个链接上遇到了一个解决方案。我添加了一个额外的 div，带有“clear:both;”到容器，它正在工作！谢谢。马特·鲍尔：谢谢，但我希望这件事能迅速发展。
从您的问题来看，这根本不清楚。谢谢你的澄清。

【解决方案3】：

感谢大卫的快速回答。我还没有阅读你写的所有内容（两个链接），但我在第二个链接上遇到了一个解决方案。我添加了一个额外的 div，带有“clear:both;”到容器，它正在工作！谢谢。 Matt Ball：谢谢，但我希望这个东西能够动态增长

【讨论】：

【解决方案4】：

当两个 div(s) 漂浮在一个没有固定高度的容器中（或者它的高度小于包含的 div(s) 的最大高度）时，您的容器会折叠成一行像素并且您的浮动 div (s) 溢出容器。

要强制容器包含两个 div，您需要在关闭容器之前清除两个浮动！换句话说......

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>

【讨论】：

也谢谢你。我从大卫的回答中找到了这个，但是谢谢！

【解决方案5】：

只需将父级的溢出样式设置为可见以外的任何内容，它就会环绕子级内容。

【讨论】：

【解决方案6】：

我发现的最佳解决方案类似于上面的 Rodrigo，但内容中不需要空格字符（因此也不需要指定字体大小）。如果你把它变成一个类，你可以将它应用到任何容器块，而不仅仅是你的包装器。（我也觉得最好不要设置 ID 样式，但这是另一个问题。）

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}

【讨论】：