css - 了解 CSS 如何清除 :both is supposed to work

Question

我有一个基于 HTML 表单的调查问卷，我正试图将其放在一起。当我遇到 float 元素问题时，我已经使用 CCS 排列了所有 HTML 表单元素。

我有一个包含一些表单元素的 DIV，我想将它们放在前一个 DIV 的下面。由于之前的 DIV 是“ float ”到左侧的，所以我想我必须使用 CSS 语法 clear:both。但是，当我这样做时，我的内容会一直跳到页面的左侧，跳出包含 DIV 的页面。我不确定为什么。

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

http://jsfiddle.net/BrWUE/

谁能看出我做错了什么以及为什么 clear:both 将我的 DIV 推出所有容器？谢谢。

Answer 1

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

您应该使用众多的 cleafix 方法之一。
这是来自 html5boilerplate 的一个:

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

这是它在您的代码中的样子:http://jsfiddle.net/BrWUE/1/ .