web-dev-qa-db-ja.com

マークアップで<div class = "clear">を使用しない方法

私のコードは常に<div>は、divをクリア/展開して正しい外観にするために使用されます。正しく見えないときはいつでも、<div style="clear:both;">そしてIE7の問題を修正します。

これを回避するにはどうすればよいですか？私はoverflow:auto、overflow:hiddenと私は何も得られません。

前もって感謝します

cssxhtmlclear
17
Tom

1つの一般的なメソッドはclearfixクラスです。フローティング要素の後に無関係な<div style="clear:both;">要素を必要とする代わりに、このクラスをフローティング要素に追加するだけでitself、レイアウトは自動的にクリアされますその後。1

私のお気に入りは http://perishablepress.com/press/2009/12/06/new-clearfix-hack からです。 IE6およびIE7と同様に、最新のブラウザーをサポートします。

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

例（古い/悪い）：

<div class="floatingrightmenu">This floats right</div>
<div style="clear:both;"></div>
<p>This text is cleared below it.</p>

例（clearfixの新機能）：

<div class="floatingrightmenu clearfix">This floats right</div>
<p>This text is cleared below it.</p>

1：注：自動クリアは、単一の浮動エレメントで最適に機能することを意味します。複数の要素を隣り合わせにフロートさせたい場合は、それらをすべてフロートされた単一のコンテナに入れ、clearfixをそのコンテナに適用します。

34
Nicole

overflow：hiddenをポップした場合;動作するはずのフローティング要素のコンテナに！しかし、どのようにクロスブラウザであるかはわかりません。

3
Treemonkey

Cascade Framework では、ブロックレベルの要素にデフォルトでmicro-clearfixを適用します。これにより、<div style="clear:both;">や<div class="clearfix">などの使用を回避できますが、副作用はごくわずかです。また、ブロックレベルの要素の従来の動作が本当に必要な場合は、絶対配置がうまくいくはずです。 Cascade Framework をチェックして、実際にどの程度実用的かを理解してください。

1
John Slegers