CSSをクリアする方法を理解する：両方とも動作するはずです

Question

私はHTMLフォームベースのアンケートを作成しています。フローティング要素に問題が発生したときに、CCSを使用してすべてのHTMLフォーム要素を並べていました。

私は以前のDIVの下に配置したいフォーム要素を含むDIVを持っています。以前のDIVは左に浮かんでいたので、私はCSSの構文を使用しなければならないと考えました。どちらもです。しかし、私が行ったとき、私のコンテンツは、ページの左にDIVを含んでいるページから飛び出しました。なぜ私は分からない。私が説明するためにJSFiddle例を作成しました

...

http://jsfiddle.net/BrWUE/

は、誰もが私が間違っているのかを見ると、なぜクリアすることができます：両方は全てのうち、私のDIVを推進していることのコンテナ？ありがとうございました。

Answer 1

これは、CSSの消去が動作する方法です。
クリアリング要素は、以前の兄弟フロート要素の下にあります。

多くのcleafixメソッドを1つ使用する必要があります。ここ
はhtml5boilerplateからの一つだ：http://jsfiddle.net/BrWUE/1/：

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

そして、ここでは、それはあなたのコードのようになります。