Day_8. 「完璧な Web デザイン」 - 賢いフローティング効果_html/css

Day_8. 「完璧な Web デザイン」 - 賢いフローティング効果_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:31:51

オリジナル

1409 人が閲覧しました

この章の内容は少し古いですが、主にフローティングを使用してテーブルレイアウトを置き換える方法について説明しており、特に目立った点はありません。ただ、浮きを解消する方法がいくつか挙げられていたので、今日は浮きを解消する方法をまとめてみます。

フロートをクリアする必要があるのはなぜですか?

フロートを除去すると言われていますが、実際にはフロートの影響を除去しています。
フローティング要素の高さは崩れます。高さの崩れは、レイアウトでフロートをクリアする必要がある最も重要な理由の 1 つです。

フローティングをクリアする方法:

親 div の高さを定義する
原則: 親 div の高さを手動で定義すると、親 div が自動的に高さを取得できないという問題が解決されます。
利点: シンプル、コードが少なく、習得が簡単
欠点: 固定高さのレイアウトにのみ適しており、正確な高さを指定する必要があります。高さが親 div と異なる場合、問題が発生します
推奨事項: そうではありません。推奨: 使用することのみをお勧めします
最後に空の div タグ clear:both を追加します
原則: 空の div を追加し、CSS によって提供される clear:both を使用して明確にフローティングし、親 div を自動的にさせます高さを取得します
利点: シンプル、コードが少なく、優れたブラウザサポート、奇妙な問題が発生しにくい
欠点: ページに多くのフローティングレイアウトがある場合、多くの空の div を追加する必要があります
推奨事項: 推奨されません, しかし、このメソッドは現在頻繁に使用されています。メソッド
親 div は疑似クラスを定義します: after
原則: IE8 以降および IE 以外のブラウザーでのみサポートされます。 Zoom (IE 専用属性) は、ie6 および ie7 のフローティング問題を解決できます
利点: ブラウザーのサポートが良好で、奇妙な問題が発生しにくい (現在: Tencent、NetEase、Sina などの大規模 Web サイトで使用されています)
短所: コードが多い、多くの初心者は原理を理解していない、数文が必要コードを組み合わせて使用する場合にのみ、主流のブラウザでサポートできます。
推奨事項: 使用することをお勧めします。CSS コードを減らすためにパブリッククラスを定義することをお勧めします
親 div は overflow:hidden を定義します
原則: width またはzoom:1 を定義する必要があり、高さは定義できません同時に、overflow:hidden を使用すると、ブラウザはフローティング領域の高さを自動的にチェックします
利点: シンプル、コードが少ない、優れたブラウザサポート
欠点: 余分なサイズが発生するため、position とともに使用することはできません。 hidden
推奨:positionを使用しない友人にのみ推奨します
親divはoverflow: auto
原則: widthまたはzoom:1を定義する必要があり、overflow:autoを使用する場合は高さを定義できません。ブラウザはフローティング領域の高さを自動的にチェックします
利点: シンプル、コードが少ない、ブラウザのサポートが優れています
欠点: 内部の幅と高さが親 div を超えると、スクロールバーが表示されます。
推奨事項: 推奨されません。スクロールバーを表示する必要がある場合、またはコードにスクロールバーが表示されないようにする場合に使用します。
親 div も一緒にフロートします
原則: すべてのコードは一緒にフロートし、全体になります
長所: 利点はありません
短所: 新しいフローティングの問題が発生します。
推奨事項: 推奨されません。理解のためだけに使用してください。
親 div 定義の表示:table
原則: div 属性をテーブルに変換します
利点: 利点はありません
欠点: 新しい未知の問題が発生します。
推奨事項: 推奨されません。理解のためだけに使用してください。
最後に br タグを追加しますclear:both
原則: IE フローティング問題を解決するために親 div にzoom:1 を定義し、最後に br タグを追加しますclear:both
推奨事項: 推奨されません。理解のためだけに。