CSS子元素如何清除父元素的浮动

Question

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

所以我将侧边栏向左浮动，并给右侧的内容设置了一个边距。一切都很好……

直到，内容的子元素应用了clear，它就会跳到侧边栏下面。

有没有办法让子元素只在其父容器内浮动并清除？

因为图片胜过千言万语，在这里是一个JSFiddle：

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

- ahren

---

@PeterSzymkowski - 你是不是先要在 jsfiddle 上按“更新”按钮？ - ahren

我假设子元素应用clear属性并没有特别的原因，问题只是如何解决应用clear属性所带来的问题。是这样吗？ - hrdwdmrbl

Answer 1

如果你在.content中添加overflow:auto;，那么应该可以解决这个问题。

- Billy Moat

---

完美。你能提供更多关于为什么这个有效的解释吗？ - ahren

问题在于当包含浮动元素时，包含该DIV的高度将不会延伸到最高元素的高度。添加overflow：auto（或hidden或scroll）将导致其扩展。更多信息请参见：http://www.quirksmode.org/css/clearing.html - Billy Moat

好奇一下，DIV的overflow属性的默认值是什么？ - Justin

@Justin - 我记得默认值是 'visible'。 - Billy Moat

@BillyMoat - 我认为原因是某些样式，包括 overflow:auto，会创建一个新的“块级格式化上下文”，这意味着其外部的浮动元素不会被考虑清除。请参阅 MDN 上的 clear 和 block formatting context 页面获取更多信息。 - antinome

既然整个目的似乎是创建一个新的块格式上下文，那么使用 display: flow-root; 是否会更直接一些呢？ - hrdwdmrbl

Answer 2

这个怎么样？

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

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

- Peter

---

这就是我想要的效果 - 但是不使用绝对定位是否可能实现？ - ahren

Answer 3

你应该避免使用clear。你可以在主容器中使用overflow:hidden。

<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将内容推离左侧列。请将两者都向左浮动。我发现列喜欢在主包装器中。这样更舒适。

- ZombieCode

---

将两个元素都设置为左浮动不会使第二列占据剩余的宽度，即不具备灵活性。 - ahren

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 上应用 float 时，将它们放在父 div 中，并在同一父 div 中清除。

- Dashrath