如何清除左浮动元素，当它与右浮动元素碰撞？

Question

如果有更好的设计方法或易于搜索的词组我可以谷歌，随时让我知道，我会很快把这个下来。不幸的是，我不认为我在谷歌搜索正确的条款。

要跳过这个解释，有一个链接到小提琴的底部。

---

我有一个右列必须永远是对的右侧，从不推下。

我有左边的元素，应该内联，直到他们碰撞右列，然后他们应该清除下一行。

---

我认为这可以通过将左侧的元素左移，右侧的列浮动到右侧来完成。我无法清除任何单个左侧元素，因为每个左侧元素的宽度都是可变的。

HTML

<div class='left-el'> 
    <ul> 
     <li>Variable width</li> 
     <li>Variable height</li> 
     <li>Left margin must always be against left-side</li> 
    </ul> 
</div> 
<div class='left-el'> 
    This column needs to move to the next<br/> 
    line since there is no room left. <br/> 
    Instead, it pushes the right-floated div down<br/> 
    to make room. 
</div> 
<div id='right-col'> 
    <ul> 
     <li>Variable width</li> 
     <li>100% height</li> 
     <li>Right margin must always be against right-side</li> 
    </ul> 
</div>​ 

CSS

.left-el { 
    background-color: orange;    
    float: left; 
    margin-right: 10px; 
} 

#right-col { 
    background-color: green; 
    float: right; 
    height: 100%; 
}​ 

条件

• 山坳权必须始终靠右对齐
• 右山坳必须可变宽度
• 左元素必须是可变宽度
• 左元素不应该用正确的山坳干扰

这是我一直在使用：http://jsfiddle.net/TmSuD/ （来自上面的标记）

也许这里的表格是适当的吗？

Answer 1

我相信，如果你把右栏放在html左边的列上面，它会做你想做的。