float_html/css_WEB-ITnose に関する知識のまとめ

フローティングに関して、最も重要なことは、IE6 および 7 でのフローティングの互換性の問題を解決することです。例: ダブルマージンのバグ、画像の下のギャップの問題など。配置による互換性の問題については後ほどまとめてみましょう~~~

ブロックの特徴

1. デフォルトでは、単独で行を占有します

2. 幅がない場合、デフォルトで行を埋めます (つまり、親要素の幅) ちょうどどのくらいの幅)

3. すべての CSS コマンドをサポート

インライン要素の特徴

1. 同じ行に同様のタグを引き続き含めることができます

2. コンテンツは幅をサポートします

3. 幅と高さはサポートされていません (「幅と高さの値は役に立ちません~」と書くだけです)

4. 上下のマージンとパディングに問題があります (上下のマージンはサポートされておらず、上下のパディング設定には実際の効果はありません)

5. コードの改行はスペースとして解析されます

inline-block の特徴と問題点

1. 1 行で表示します

2. インライン要素は幅と高さをサポートします

3. 幅がない場合、デフォルトのコンテンツは引き伸ばされます

4. タグ間の改行ギャップはスペースとして解析されます (それがスペースであるかどうか)

5. IE6/7 はブロック属性タグの inline-block をサポートしません

フローティングとは、要素をドキュメントの流れから切り離し、指定された方向に移動し、親の境界または隣接する浮動要素に遭遇すると停止します。

float を追加した後の要素には、次の特徴があります: 1. ブロックが連続して表示されます。 2. インライン要素は幅と高さをサポートします。 3. ブロック要素またはインライン要素のいずれかに幅がない場合、デフォルトのコンテンツが引き伸ばされます。ドキュメント フローから抜け出します (フロートをクリアしてみてください~~) 5. レベルを半層上げます

フロートをクリアするにはどうすればよいですか?

1. 親に高さを追加します。しかし、一般的なWebページの高さの値は子要素の高さの合計に基づいて求められるため、スケーラビリティが悪く、一般的には使用されません。

2. すべての親にフロートを追加します。ただし、左右のマージンが自動的に失敗します

3. display:inline-block を親に追加します。問題: 左右の余白の自動が無効です

4.

空のタグを追加します

問題: IE6 の最小高さは 19 ピクセルです (解決後も 2 ピクセルのずれがあります)。 IE6 では) IE6 では、19px 未満の要素の高さは 19px~ として扱われます

5.
クリアフロートを追加します。しかし、このメソッドは、構造、スタイル、動作の分離の要件を満たしていません

6.疑似クラスのクリアフロートメソッド（現在主流のメソッド）の後

.clear:after{content:'';display:block;clear :both; } それはブロックである必要があります

.clear{zoom:1;}

その中で:

擬似クラス: 要素の最後にコンテンツを追加することです。 ";} IE6、7 には互換性がありませんが、IE6 および 7 では、浮動要素の親に幅がある場合、浮動要素をクリアする必要はありません。

zoom:1; は、要素が独自のコンテンツに基づいて幅と高さを計算するように、IE で haslayout をトリガーします。ただし、FF は

7.overflow:hidden clear float メソッドをサポートしていません。

overflow は浮動要素をラップするという特徴があります。ただし、IE6 では互換性がありません。IE6 では浮動要素をラップできません。つまり、IE6 では要素をラップする機能がありません

問題: IE6 と互換性を持たせるには、width またはzoom:1 を一致させる必要があります。親要素にはボーダーがあるので、ここに書き込みます。幅は親の対応する幅を設定します。zoom:1 を記述すると、ボーダーはページ全体の幅を包みます。