明確な浮き上がりは、ページを作成する人なら誰でも遭遇するものですが、誰もがそれをはっきりと認識し、包括的に理解できますか?なので、時間ができたらすぐにこのような記事を書きました。すべてをカバーすることはできませんが、基本的に私が知っていることはみんなに教えることができます。
float をクリアするメソッドがどれくらいあるのか、大まかに見てみましょう (IE でのzoom:1 の使い方については書きませんが、次のトピックで書きます)。対応するデモ
- pseudo-class:after を使用して、後続の空のコントロールのために高さ 0 の疑似クラス層をクリアします。
- CSS overflow:auto を使用して高さをサポートする
- CSS overflow:hidden を使用して奇妙な適応を生成する
- オブジェクトをテーブル形式にするには、display:table を使用します。
- divタグとcssのclear属性を利用する
- brタグとcssのclear属性を使用する
- br タグと独自の HTML クリア属性を使用する
大まかに言えば、どちらも問題を解決できますが、それぞれに長所と短所があります。 （一対一対応）
- アドバンテージ構造のセマンティクスは完全に正しいので、他の奇妙な問題は発生しません。
短所不適切な再利用方法を使用すると、コード量が急激に増加する可能性があります。
最外層が軽く浮いている場合やモジュール再利用方法を理解している方におすすめです。 - 利点: 構造のセマンティクスは完全に正しく、コードの量は非常に少ないです。
欠点: 複数のネストの後、最も外側の軽いフローティング ボックスをクリックすると、最も外側のレイヤーから最も内側のレイヤーまでのすべてのコンテンツが選択されます (FF)。または、マウスオーバーにより幅が変化すると、最も外側のモジュールがスクロールします。バー（IE）。
モジュールを 1 つの中で使用し、入れ子にしないことをお勧めします。 - 利点: 構造のセマンティクスは完全に正しく、コードの量は非常に少ないです。
欠点:コンテンツが増えると、自動的に行が折り返され、コンテンツが非表示になりやすくなります。
幅が固定されており、ネストしない場合に使用することをお勧めします。 - 利点: 構造のセマンティクスは完全に正しく、コードの量は非常に少ないです。
欠点ボックス モデルの特性が変化したことは、数え切れないほど多くの奇妙な出来事があると考えられます。
バグを修正して命を落としたくない場合は、使用しないことをお勧めします。ただし、アルファ版ではテスト用の一時的な欺瞞として使用できます。 - 利点:コードの量が非常に少なく、再利用性が非常に高いです。
欠点は、セマンティクスに完全に適応できず、改訂や変更の要求に対応できないことです。
初心者におすすめで、浮いた問題を素早く解くことができます。 - 利点: 5 番目のケースよりもセマンティクスの程度が優れており、コードの量が非常に少なく、再利用性が非常に高くなります。
短所:セマンティクスはまだ完全ではないため、改訂や変更の要求にはつながりません。
初心者におすすめで、浮いた問題を素早く解くことができます。 - 利点:ケース 5 および 6 よりもセマンティクスの程度が優れており、コードの量が最小限であり、再利用性が非常に高いです。
短所:セマンティクスはまだ完全ではないため、改訂や変更の要求にはつながりません。
クラス名を使用してパフォーマンスを制御するのではなく、Web ページの WEB1.0 時代に戻り、HTML 属性を直接使用してパフォーマンスを制御する方が良いことを理解できるように、初心者が思考をアップグレードするときにこれを使用するようにガイドすることをお勧めします。結局のところ、後者の方がコードが少なくなります。
ついにリストが完成しました。しかし、Ghost に転載した記事については皆さんに謝罪する必要があると思います。Ghost のタイトルを「最も簡単」から「最適」に変更し、後に多くの学生に誤解を与えたことを非常に後悔しています。そこで、皆さんにシェアするために記事を書き直しました。
原文: http://webteam.tencent.com/?p=1122
