CSS子清除父浮动

Question

我有一个两列布局，侧栏在左边，内容在右边。

所以我将侧边栏放在左边，并给右边的内容留出空白处。一切都很好...

在内容的子元素应用了clear之前，它会跳到侧边栏的下方。

有没有办法让子元素只在它的父容器中浮动和清除？

因为一张图片胜过1000个单词，所以这里有一个JSFiddle：

http://jsfiddle.net/qRYYm/1/

Answer 1

如果您将overflow:auto;添加到.content中，应该会看到正确的结果。

Answer 2

这样如何：

aside{
    position: absolute;
    height: 300px;
    width: 100px;
}

http://jsfiddle.net/qRYYm/2/

Answer 3

您应该避免使用clear。你可以使用overflow:hidden with main container

<div class="content">
    <div class="one">One</div>
    <div class="two">Two</div>    
</div>

.content { float: left; overflow: hidden; width: 900px; }
aside { float: left; width: 100px; }

此外，您不应该使用空白符- left :100px将内容从左边的列中推开。两个都向左浮动。我发现列喜欢放在主包装器中。那样会更舒适。