フロートをクリアする方法はたくさんありますが、それぞれの違いは何ですか?

ページを作成するときに、フロートをクリアする必要がある小さな問題がよく発生します。では、フロートをクリアする方法は何でしょうか?次にそれについて話し合いましょう。

clearfix フロートのクリアは 2 つのタイプに分けられます:

自身のフロートのクリア

親フロートのクリア

1. なぜフロートをクリアする必要があるのか​​

ブロックレベルの要素の高さが設定されていない場合、その高さは子要素が float を使用し、標準のドキュメント フローから逸脱している場合、親要素の高さはそれを無視します。firebug を使用して、float がクリアされていないかどうかを確認すると、親要素が表示されます。高さが十分でないため、境界線や背景を設定すると正しく解析されません。

単純クリアフロート

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

クラシッククリアフロート:

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

オーバーフロークリアフロート:

/* overflow:auto */#demo3{    overflow:auto;*zoom:1; }/*或 overflow:hidden */#demo4{    overflow:hidden;*zoom:1; }

inline-blockメソッド

#demo5{    display:inline-block;*display:inline;*zoom:1; }

このメソッドは以下と同じになります他の方法上記は少し異なりますが、主に inline-block が原因です。

以上がフロートをクリアする方法はたくさんありますが、それぞれの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。