CSS フローティング_html/css_WEB-ITnose に関するソリューション

浮動要素によって引き起こされる問題:

1. 親要素のすべての第 1 レベルの子要素が浮動要素である場合、親要素の高さを拡張できず、親要素と同じレベルの要素に影響します

2. 浮動要素と同じレベルにある非浮動要素 (コンテンツ) がそれに続きます

3. 最初の要素が浮動でない場合、その前の要素も浮動にする必要があります。そうしないと、要素の構造に影響します。ページ表示

解決策:

CSS で clear:both; 属性を使用して要素のフロートをクリアすると、問題 2 と 3 を解決できます。問題 1 については、次のスタイルを追加し、clearfix スタイルを親要素に追加します。 :

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{display: inline-block;} /* for IE/Mac */

float をクリアするいくつかの方法:

1. 追加のタグ メソッド、

(欠点: ただし、このメソッドは追加のタグを追加し、 HTML 構造が簡潔に見えなくなります。)

2. 疑似クラスの後に使用します (IE 以外のブラウザにのみ適用可能)

#parent:after{    content:".";    height:0;    visibility:hidden;    display:block;    clear:both;}

3. 外部要素をフローティングします

4. オーバーフローを非表示または自動ズームに設定します:1 ( IE6との互換性)