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

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

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

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

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

1. 親 div の高さを定義する

2. 原則: 親 div の高さを手動で定義すると、親 div が自動的に高さを取得できないという問題が解決されます。
3. 利点: シンプル、コードが少なく、習得が簡単
4. 欠点: 固定高さのレイアウトにのみ適しており、正確な高さを指定する必要があります。高さが親 div と異なる場合、問題が発生します
5. 推奨事項: そうではありません。推奨: 使用することのみをお勧めします

6. 最後に空の div タグ clear:both を追加します

7. 原則: 空の div を追加し、CSS によって提供される clear:both を使用して明確にフローティングし、親 div を自動的にさせます高さを取得します
8. 利点: シンプル、コードが少なく、優れたブラウザサポート、奇妙な問題が発生しにくい
9. 欠点: ページに多くのフローティングレイアウトがある場合、多くの空の div を追加する必要があります
10. 推奨事項: 推奨されません, しかし、このメソッドは現在頻繁に使用されています。 メソッド

11. 親 div は疑似クラスを定義します: after

12. 原則: IE8 以降および IE 以外のブラウザーでのみサポートされます。 Zoom (IE 専用属性) は、ie6 および ie7 のフローティング問題を解決できます
13. 利点: ブラウザーのサポートが良好で、奇妙な問題が発生しにくい (現在: Tencent、NetEase、Sina などの大規模 Web サイトで使用されています)
14. 短所: コードが多い、多くの初心者は原理を理解していない、数文が必要 コードを組み合わせて使用​​する場合にのみ、主流のブラウザでサポートできます。
15. 推奨事項: 使用することをお勧めします。CSS コードを減らすためにパブリック クラスを定義することをお勧めします

16. 親 div は overflow:hidden を定義します

17. 原則: width またはzoom:1 を定義する必要があり、高さは定義できません同時に、overflow:hidden を使用すると、ブラウザはフローティング領域の高さを自動的にチェックします
18. 利点: シンプル、コードが少ない、優れたブラウザサポート
19. 欠点: 余分なサイズが発生するため、position とともに使用することはできません。 hidden
20. 推奨:positionを使用しない友人にのみ推奨します

21. 親divはoverflow: auto

22. 原則: widthまたはzoom:1を定義する必要があり、overflow:autoを使用する場合は高さを定義できません。ブラウザはフローティング領域の高さを自動的にチェックします
23. 利点: シンプル、コードが少ない、ブラウザのサポートが優れています
24. 欠点: 内部の幅と高さが親 div を超えると、スクロール バーが表示されます。
25. 推奨事項: 推奨されません。スクロール バーを表示する必要がある場合、またはコードにスクロール バーが表示されないようにする場合に使用します。

26. 親 div も一緒にフロートします

27. 原則: すべてのコードは一緒にフロートし、全体になります
28. 長所: 利点はありません
    
29. 短所: 新しいフローティングの問題が発生します。
30. 推奨事項: 推奨されません。理解のためだけに使用してください。

31. 親 div 定義の表示:table

32. 原則: div 属性をテーブルに変換します
33. 利点: 利点はありません
    
34. 欠点: 新しい未知の問題が発生します。
35. 推奨事項: 推奨されません。理解のためだけに使用してください。

36. 最後に br タグを追加しますclear:both

37. 原則: IE フローティング問題を解決するために親 div にzoom:1 を定義し、最後に br タグを追加しますclear:both
38. 推奨事項: 推奨されません。理解のためだけに。