第十六章フローティングのクリア
6450 ワード
div
第128課フローティング要素の高さの問題
1、標準ストリームのコンテンツの高さは親要素の高さを支えることができる2、フローティングストリームに浮かぶ要素は親要素の高さを支えることができない
第129課クリアフローティング方式一
前の親要素の高さを設定
注意点:
企業開発では、高度を書かずに高度を書かないことができるので、このような方法は少ないです.
第130課フローティングモード2のクリア
後ろのボックスにclearプロパティを追加
clearプロパティの値:
none:デフォルトでは、フローティング要素のソート規則に従ってleftをソートします.前の左フローティング要素を探さないでください.right:前の右フローティング要素bothを探さないでください.前の左フローティング要素と右フローティング要素を探さないでください.
注意点:
ある要素にclearプロパティを追加すると、この要素のmargin-topプロパティは失効します.
第131課margin-top失効原因
親要素が枠線を設定していない場合、要素のmargin-topを設定すると、親要素は直接突き落とされます.親要素の枠線を設定した後、要素のmargin-topを設定すると、下に移動できますが、前の要素の高さより大きくなります.
注意点:
企業開発においてbodyの枠線が設定されていない
第132課フローティングモード3をクリアする
仕切り法HTMLでスタイルを修正するのはおすすめしません1、外壁法
1.1 2つのボックスの間に追加のブロックレベル要素1.2を追加この追加のブロックレベル要素にclear:bothを設定する.ツールバーの
注意点:
外壁法2番目のボックスにmargin-topプロパティを使用できますが、1番目のボックスにmargin-bottomプロパティを使用することはできません.
追加要素の高さを変更して間隔を設定できます
第132課フローティング方式四1、内壁法をクリアする
1.1最初のボックスのすべてのサブエレメントの最後に追加されたブロックレベルエレメント1.2この追加されたブロックレベルエレメントにclear:bothを設定する.ツールバーの
注意点:
内壁法2番目のボックスにmargin-topプロパティを使用するとともに、1番目のボックスにmargin-bottomプロパティを使用すると、追加要素の高さを変更して間隔を設定できます.
違い:
外壁法は最初の箱の高さを支えることができず、内壁法は最初の箱の高さを支えることができる.
企業開発では、フローティングをクリアするために壁法をあまり使用しません.
レッスン134擬似要素セレクタ
擬似要素セレクタは、指定したラベルの内容の前または後ろにサブ要素を追加する役割を果たします.
書式:
ラベル名::before{プロパティ名:値;}ラベル名::after{プロパティ名:値;}
注意点:
1つの要素を非表示にすると、高さを0に設定すると、内容が要素の範囲外に表示され、visibility:hiddenを設定する必要があります.
第135課フローティング方式をクリアする5
擬似要素セレクタの使用:CSSによるスタイル推奨の変更
擬似要素選択器を用いる、第1の要素に追加する.box1::after{ display: block; clear: both; content: ""; }, 擬似要素セレクタclear:bothを同時に設定します.互換性IE 6は、最初の要素に*zoom:1を追加します.
注意点:
2番目のボックスにmargin-topプロパティを使用するとともに、1番目のボックスにmargin-bottomプロパティを使用すると、追加要素の高さを変更して間隔を設定できます.
第136課フローティングモード6をクリアする
overflow:hidden; 推奨機能:
1、ラベルの範囲を超えた内容を切り取ることができる2、フローティング互換IE 6をクリアしたときに最初の要素に*zoom:1を追加する.2番目のボックスにmargin-topプロパティを使用させるとともに、1番目のボックスにmargin-bottomプロパティを使用させると、追加要素の高さを変更して間隔を設定することができます3、overflow:hiddenを使用することができます.中の箱にmargin-topをセットした後、外の箱は押されません.
コンテンツ参照