Html 未根据内部div设置div高度

我有一个div作为包含两列的容器 这两个列都有动态大小，我需要顶部容器采用内部divs大小，以便容器下面的内容正确对齐

#container{
    width:800px;
    height: auto;
    min-height: 100%;
    margin:0 auto;
}
#leftdetails{
    float:left;
    width:250px;
    height: 100%;
}
#rightdetails{
    float:right;
    width:250px;
    height: 100%;
}

当我检查容器时，高度为0

     <div id="reamcontent">
            <div id="rightdetails">
                lots of content
            </div>
            <div id="leftdetails">
                lots of content
            </div>
     </div>
<div id"other">
 this overlaps the reamcontent
</div>

很多内容
很多内容
这与内容重叠

添加一个清晰的div，这将固定高度

外部div正在塌陷，因为其内部的两个子div处于浮动状态

css

html

很多内容
很多内容

听起来你需要一个：

---

您可以设置

溢出：自动在
#内容上
完美！好奇的是，为什么它是一个类？这样你就可以在一个页面中多次使用它了
.clear {
    clear:both;
}

<div id="reamcontent">
    <div id="rightdetails">lots of content</div>
    <div id="leftdetails">lots of content</div>
    <div class="clear"></div> <!-- div added -->
</div>

#reamcontent:after {
  content: "";
  display: table;
  clear: both;
}