理解CSS如何清除：两者都应该有效

Question

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

我有一个DIV，其中包含一些我希望放在前一个DIV下面的表单元素。由于之前的DIV“浮动”到左侧，我认为我必须使用CSS语法 clear：both 。但是，当我这样做时，我的内容一直延伸到页面左侧，跳出包含DIV的页面。我不知道为什么。

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

http://jsfiddle.net/BrWUE/

任何人都可以看到我做错了什么以及为什么明确：两个正在推动我的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/。