了解 CSS clear:both 的工作原理

Question

我正在尝试整理一份基于 HTML 表单的调查问卷。当我遇到浮动元素问题时，我已经使用 CCS 排列了所有 HTML 表单元素。

我有一个包含一些表单元素的 DIV，我想将它们放置在前一个 DIV 下方。由于之前的 DIV“浮动”到左侧，我想我必须使用 CSS 语法 clear:both。然而，当我这样做时，我的内容一直跳到页面的左侧，跳出了它包含的 DIV。我不知道为什么。

我创建了一个 JSFiddle 示例来帮助解释...

http://jsfiddle.net/BrWUE/

任何人都可以看看我做错了什么以及为什么 clear:both 将我的 DIV 从所有容器中推出？谢谢。

Answer 1

这就是 CSS 清除的工作原理。
清除元素将位于任何先前的同级浮动元素下方。

您应该使用众多 cleafix 方法之一。
这是 html5boilerplate 中的一个：

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1 }

这是代码上的样子：http://jsfiddle.net/BrWUE/1/ 。