ホームページ  >  記事  >  ウェブフロントエンド  >  フロートを掃除するにはどうすればよいですか?フロートをクリアする 4 つの方法

フロートを掃除するにはどうすればよいですか?フロートをクリアする 4 つの方法

云罗郡主
云罗郡主転載
2018-11-13 17:17:274906ブラウズ

この記事の内容は、浮きを掃除する方法についてです。フロートをクリアするための 4 つの方法は、参考にしていただければ幸いです。

フロートを掃除するにはどうすればよいですか?フロートをクリアする 4 つの方法

ルーチン 1: フローティング要素の親要素に高さを追加する (スケーラビリティが低い)

要素をフローティングしたい場合, その場合、その親要素には高さがなければなりません。ボックスの高さを利用してフロートを閉じることができます。実際のアプリケーションでは、すべてのボックスに高さを追加することはできませんが、面倒なだけでなく、ページの高さの急激な変更にも対応できません。親コンテナはコンテンツ(img Pictureなど)で展開することができ、実際にはこの方法がよく使われます。 [推奨読書: 10 のフローティング エフェクト特殊効果 (コレクション) 推奨 #]

ルーチン 2: 両方クリア;

#最後の冗長要素を最後の子要素に追加し、それを clear: Both に設定して、float をクリアできるようにします。ここで、親要素の最後に追加される要素はブロックレベルの要素である必要があり、そうでない場合は親要素の高さをサポートできないことが強調されています。

ルーチン 3: フローティング擬似要素をクリアする

上記の方法でフローティングを確実にクリアできますが、これらの無意味な冗長要素をページに追加したくありません。フロートをクリアするには?

:after 疑似要素と IEhack を組み合わせると、現在の主要な主流ブラウザーすべてと完全に互換性があります。ここでの IEhack は、hasLayout をトリガーすることを指します。

ルーチン 4: br タグのクリア float

br タグには属性:clear があります。この属性は、浮動小数点をクリアするための強力なツールです。br タグ内で属性 clear を設定し、それに値 all を割り当てます。つまり、フロートをクリアすることができる。

上記はフロートをクリーンアップする方法についてです。 float をクリアする 4 つの方法の完全な紹介

Html5 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がフロートを掃除するにはどうすればよいですか?フロートをクリアする 4 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。