html - CSS子清除父浮动

Question

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

所以我将侧边栏向左浮动，并给右侧的内容留出边距。一切都很好...

直到，内容的一个子元素被明确应用，它跳到侧边栏下方。

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

因为一张图值 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。您可以使用溢出：隐藏与主容器

<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; }

此外，您不应使用 margin-left:100px 将内容推离左侧列。向左浮动。我发现这些列喜欢放在主包装器中。这样更舒服

Answer 4

你也可以这样做。

.left{float:left;}
.right {float:right;}
.clear{clear:both;}

<div>
    <div class="left">SideBar</div>
    <div class="right">
             <div>
                 <div class="left">content 1</div>
                 <div class="left">content 2</div>
                 <div class="clear"></div>
             </div>
   </div>
    <div class="clear"></div>
</div>

在任何 div(s) 上应用 float 时，将它们放在父 div 中并在同一个父 div 中清除