有没有一种方法可以限制CSS浮动和清除的作用范围？

Question

问题示例请参见：http://jsfiddle.net/xZmFg/4/

肯定有一种方法可以让描述紧接在输入框下方（不是右侧），而不会出现在菜单下方...

我知道使用“float”会打破内容的流动性，但难道没有一种方法只将其应用于父容器内部的空间吗？

- HorusKol

Answer 1

您可以使用overflow:hidden来使您的描述和表单输入的父元素包含所有浮动元素：

.content-box {
    overflow: hidden;
}

这样，它们就不会干扰侧边栏元素的浮动。

jsFiddle预览

- BoltClock

---

我的答案与mu的答案略有不同，因为我选择不浮动.content-box，所以它会拉伸其宽度。 - BoltClock

有趣的解决方案 - 这是CSS中记录的行为吗？ - HorusKol

在你给了我这个之后，我能够在Google上搜索很多相关信息。看起来这很可靠 - 我只是担心这可能是那些突然消失的CSS hack之一。 - HorusKol

我发现了 - 将overflow设置为除visible以外的其他值会使您的父元素拥有自己的块级格式上下文。 - BoltClock

Answer 2

你可以将容器浮动到输入框和段落周围：

.content {
    float: left;
}

然后在.description上删除clear: left;，因为它没有任何作用（或者保留它）。

http://jsfiddle.net/ambiguous/QdY44/

- mu is too short