余分なマークアップなしでフロートをクリア

Question

私はここにこのページを読んでいました：http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/余分なマークアップなしでフロートをクリアすることについては、私はあなたができると思ったことは言及していませんでした。

私は、最後の要素を浮かべていないだけでフロートをクリアすることもできると思いますか？

3つの要素を浮動させたい場合は、最初の2つの要素をフロートさせ、最後の要素をフロートさせないでください。最後の要素はまだ浮動ですが、後の要素は浮かびません。

Answer 1

コンテナ内の要素が浮動するように設定されていると、それらはねじ込みます。

（それはもう、文書の流れではないので）親がそれで浮いた要素の高さを知らないので

http://jsfiddle.net/CkdY6/

あなたができる最善を設定されています誰かが最近私に指摘したように、あなたがドロップシャドウのようなCSS3のものを使用したいときoverflow: hidden

http://jsfiddle.net/CkdY6/1/

の親要素がし​​かし、それは台無しになります。

http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

Answer 2

ほとんどのCSSは、「リセット」スタイルシートは要素の後に、自動清算のためのクラスを持つことになります。 など。 html5reset.orgのこれらのルールでは、<div class="clearfix">your floats in here</div>を書くことができます：

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; }