Html 浮动在容器div上的两列css设置

我有一个非常简单的两列设置，如下所示

但是，在示例1中，我设置了两个列，#left和#right div将浮动在#posts容器上方

示例2不是这样浮动的，但不是我正在寻找的两列设置。建议

div#posts 
{
   width: 700px;  
   margin: 0 auto;  
   margin-top: 5px;
   margin-bottom: 0px;  
   padding: 5px;  
   border: 1px solid #CCC;  
   background-color: #EEE;  
} 

div#left {
   float:left;
   width:100px;
   background:#EEE;
}

div#right {
   float:right;
   width:500px;
   background:#EEE;
}


<!-- example 1 

<div id="posts">
    <div id="left">post</div>
    <div id="right">post</div>
</div>

<!-- example 2

<div id="posts">
    <div>post</div>
    <div>post</div>
</div>

div#posts
{
宽度：700px；
保证金：0自动；
边缘顶部：5px；
边缘底部：0px；
填充物：5px；
边框：1px实心#CCC；
背景色：#EEE；
} 
左分区{
浮动：左；
宽度：100px；
背景：#EEE；
}
对{
浮动：对；
宽度：500px；
背景：#EEE；
}
[编辑：好吧，算了吧]

正确的方法是在Posts div中添加一个div，但在属性为clear的列之后添加一个div:both

例：


邮递
邮递

为此，大多数人手头都有一个.clear类（.clear{clear:both；}）。它经常出现。
[编辑：好的，算了吧]

正确的方法是在Posts div中添加一个div，但在属性为clear的列之后添加一个div:both

例：


邮递
邮递

为此，大多数人手头都有一个.clear类（.clear{clear:both；}）。它经常出现。
只需添加
溢出：自动到您的
div#posts
规则

将
overflow
属性设置为
auto
会导致该元素在所有现代浏览器中都包含浮动。唯一一次（据我所知），这可能会导致问题是如果有一些限制（可用空间有限，显式宽度/高度与超大内容等），这使得自动滚动条不受欢迎，但这并不常见。（事实上，在这些情况下，自动滚动条通常是一件好事。）
只需添加
溢出：自动到您的
div#posts
规则

将
overflow
属性设置为
auto
会导致该元素在所有现代浏览器中都包含浮动。唯一一次（据我所知），这可能会导致问题是如果有一些限制（可用空间有限，显式宽度/高度与超大内容等），这使得自动滚动条不受欢迎，但这并不常见。（事实上，在这种情况下，自动滚动条通常是一件好事。）
溢出：如果它是跨浏览器兼容的，那么自动滚动条将是一个优雅的解决方案。如果我没记错的话，它会在IE6/7上给你带来一些问题

有关溢出自动/隐藏的更多信息
溢出：如果是跨浏览器兼容的，自动
将是一个优雅的解决方案。如果我没记错的话，它会在IE6/7上给你带来一些问题

有关溢出自动/隐藏的更多信息
是的，这使它可以工作，但会将整个div浮动到一边，并以居中布局。。嗯，通常不再需要像这样使用显式清算div；设置
溢出：自动具有相同的效果，并且不需要额外的标记（请参见我的答案）。同意Ben的观点。抱歉，epalla，但当空清除时：两个div都工作，它添加了无关的标记。您能回答吗？是的，这使它工作，但将整个div浮动到一边，并且它是一个居中布局。。嗯，通常不再需要像这样使用显式清算div；设置
溢出：自动具有相同的效果，并且不需要额外的标记（请参见我的答案）。同意Ben的观点。抱歉，epalla，但虽然空的很清楚：两个div都工作，但它添加了无关的标记。您能回答吗？
<div id="posts">
    <div id="left">post</div>
    <div id="right">post</div>
    <div style="clear: both;"></div>
</div>