CSSクリア float_html/css_WEB-ITnose

前の言葉

人々はよくクリアフローティングについて話しますが、それは実際にはフローティング要素を含むブロックの高さの崩壊の問題を解決するためです

定義

Clear Clear

値: left | right |両方 | none 継承

初期値: none

適用対象: ブロックレベル要素

継承: none

left:左侧不允许存在浮动元素right:右侧不允许存在浮动元素both:左右两侧不允许存在浮动元素none:允许左右两侧存在浮动元素

[注意] Clear 属性を設定する要素は、浮動要素を変更できません。

CSS2.1 で導入 クリア領域は、要素の上部マージンの上に追加される余分なスペースです。つまり、要素がクリア属性を設定すると、そのマージンがこの範囲に入ることは許可されません。変更しないでください。

メソッド

標準ブラウザの場合、float 要素の下に新しい要素を追加して、clear 属性を設定する方法が 2 つあります。浮動要素を含めるブロックを含むブロック。 IE7 ブラウザの場合、独自の属性 haslayout

【1】clear 属性

[1]03ae7924627a7897291bea15762cde4416b28748ea4df4d9c2150843fecfba68

8185c0bf96390916bdb86ed032adf8e2含むブロックが ff6d136ddc5fdfeffaf53ff6ee95f185 の場合、子要素は 25edfb22a4f469ecb59f1190150159c6 のみであるため、25edfb22a4f469ecb59f1190150159c6 の後に dc6dce4a544fdca2df29d5ac0ea9906b 要素を追加することは不適切です

[2]659c5a9e6cbe84a32d8c26e9059714ab

02a3e20d59048d010af4e925b4e72bb4clear 属性はブロックレベルの要素にのみ適用されますが、IE7 を除くすべてのブラウザの 0c6dc11e160d3b678d68754cc175188a 要素にも Clear 属性を適用できます。 [3] Clear 属性を設定するフローティング要素の after 疑似要素の場合

.clear:after{content:""; display: block; clear: Both;}

8f59fb9fb3a43e1d2d052eb1cb399044IE7 - ブラウザは after 疑似要素をサポートしていません

【2】BFC

[1]float: left/right

[2]position:absolute/fixed

[3]display:inline-block/table-cell/table-caption/flex

[ 4]overflow:hidden/scroll/auto

BFC に関する詳しい情報はここに移動します

【3】IE7-

IE7 について-ブラウザには固有の属性 haslayout があり、そのブロックを含む haslayout がトリガーされるとき、フローティング要素はレイアウト要素によって自動的に組み込まれます

[1]display:inline-block

[2]height/width:auto以外

[3]float:left/right

[4]position:absolute

[5]writing-mode: tb-rl

[6]zoom: 通常以外

haslayout に関する詳しい情報はここに移動します

互換性のある

すべてのブラウザで互換性のある明確なフローティング スキームは次のとおりです:

りー