CSS布局高度

我需要在

中有两列：

当前HTML

<div id="corpo">
    <div id="corpo_esquerdo">
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
    </div>

    <div id="corpo_direito">
        direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd
        fasdf asd fasd fasd fasdfa sdfa
    </div>

</div>

但是

div#corpo_esquerdo

和

div#corpo_direito

穿过

div#corpo

---

我该怎么做呢？为了让

div#corpo#esquerdo

和

div#corpo#u direito

不要越过

div#corpo

？

IMO最有效的方法是应用溢出属性

#corpo_esquerdo {
    width: 650px;
    float: left;
    border: #bababa solid 2px;
    overflow: hidden;
}

---

如果将

overflow:hidden

应用于包含浮动子容器的父容器，则父容器将展开以适合其子容器

#corpo {
    overflow: hidden;
    /* the rest of your definition */
}

尝试添加：

overflow:hidden;

---

到您的#corpo_esquerdo和#corpo_direito分区。

尝试清除以下内容：

<div id="corpo">
  <div id="corpo_esquerdo">
  your text
  </div>
  <div id="corpo_direito">
  your text
  </div>
  <!-- clear -->
  <div style="clear:both;"></div>
</div>

你的文字
你的文字

这里发生了两件事

One-如其他人所述，如果要隐藏父级边界以外的内容，请使用

overflow:hidden

Two-您还体验到容器中浮动元素的折叠效果。其思想是将浮动元素从自然页面流中移除（如绝对定位项）。这些项目的高度不会强制父元素垂直展开

如果要扩展父元素的高度，请对父元素使用apply

clearfix

class

ie: <div id="corpo" class="clearfix">

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}

ie:
/*适用于现代浏览器*/
.clearfix:之前，
.clearfix:之后{
内容：“；
显示：表格；
}
.clearfix:之后{
明确：两者皆有；
}
/*对于IE 6/7（触发器布局）*/
.clearfix{
*缩放：1；
}

此外，您还可以在浮动元素下方插入另一个元素，该元素仍然在自然页面流中，并且

clear:tware

css rulle已应用（如其他人所述）。我不喜欢此解决方案，因为您必须使用无关元素才能使其工作。

在关闭外部div之前添加

：

<div id="corpo">
    <div id="corpo_esquerdo">
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
    </div>


    <div id="corpo_direito">
        direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd
        fasdf asd fasd fasd fasdfa sdfa
    </div>
    <div style="clear:both"></div>

</div>

asdss SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
ddddddddf ASDFASDFASDFASDSD asdf asdf sd
asdss SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
ddddddddf ASDFASDFASDFASDSD asdf asdf sd
指令sdfasdfasdfasd asd asfd asdf asdfa sdfa sdf sadf asd
fasdf asd fasd fasd fasdfa sdfa

---

这里是一个演示：

您还可以将overflow:auto添加到#corpo div

#corpo {
    overflow:auto;
    border: 5px #ffe4c4 solid;
    width: 980px;
    margin: -30px auto;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 15px;
    color: #a8a8a8;
    font-size: 20px;
}

---

在这里查看结果：

在JSFIDLE上签出解决方案：

它基本上对父

div

应用一个clearfix，该父

div包含浮动的
div
的子项

如果你想获得内容的高度，你可以阅读更多关于解决方案的内容。你可以尝试在
div#corpo
容器后添加
。发生这种情况是因为
div#corpo
中的浮动未清除。我不太明白这个问题。您使用了什么body标签来包含列元素，或者您正在讨论左列和右列的顺序？这不考虑IE。。。！！请在此阅读更多信息，只有IE6无法处理。大多数人已经放弃了对IE6的支持。我不推荐这个，因为它是非标准的标记…它是一个快速但肮脏的解决方案。。。。更多信息可以在这里阅读。。
#corpo {
    overflow:auto;
    border: 5px #ffe4c4 solid;
    width: 980px;
    margin: -30px auto;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 15px;
    color: #a8a8a8;
    font-size: 20px;
}