[CSS] float_html/css_WEB-ITnose を見つけてクリアします

位置決め

ボックスの右上、左下の変位属性は、要素の位置と方向を指定するために使用されます。これらの属性は、要素の位置属性が相対絶対の値に設定されている場合にのみ有効になります。修理済み。

相対の場合、変位属性は要素の現在位置から元の位置までのオフセット、つまり要素と元の位置のエッジの間の距離を指します。

絶対固定の場合、変位プロパティは要素と親要素のエッジの間の距離を指します。 (absolute は非静的親要素または body に基づき、fixed はブラウザ ウィンドウに基づきます)

static

要素はすべて Position 属性を持ち、そのデフォルト値は static です。これは、それらが持たないことも意味します。位置属性の設定は受け入れられません。 (右上、左下)

相対

相対要素はページ内で通常どおり静的であり、自然な流れに属します。他の要素は元の位置を占めません。

上と下を同時に設定した場合、上が下より優先されます。

left right が同時に設定されている場合、ページで使用されている言語が left-to-right ltr か right-to-left rtl であるかによって異なります。

絶対

絶対要素はドキュメント フローから抜け出します。絶対要素には、少なくとも 1 つの祖先要素に相対属性または絶対属性が設定されている必要があります。そうでない場合、要素はページの本文に対して相対的に配置されます。

絶対を使用する要素は、垂直および水平の変位属性を指定できるため、絶対要素は相対に設定されている祖先要素のエッジを基準にして変位されます。負の変位プロパティを指定すると、要素がボックスの外に移動します。

たとえば、絶対要素の上端の値が 50px、右端の値が 100px に設定されている場合、絶対要素は、相対設定された親要素の上端に対して下に 50px 移動し、相対的に左に 100px 移動します。親要素の右側。

ただし、absolute を使用する要素にボックス ディスプレイスメント属性の設定がない場合、absolute 要素の上部と左は、relative に設定されている親要素の上部と左と一致します。 top などのボックス ディスプレイスメント属性が設定されている場合、絶対要素は垂直方向に移動し、水平位置はデフォルトで左揃えになります。

絶対要素が高さと幅を明示的に指定せず、ボックス ディスプレイスメントの上部プロパティと下部プロパティを同時に使用する場合、要素の高さはコンテナ全体に及びます。同様に、この要素が左右のオフセット属性値の両方を使用する場合、要素の幅はコンテナ全体に広がります。 4 つのディスプレイスメント プロパティを同時に使用すると、要素の高さと幅はコンテナ全体に広がります。このとき、アブソリュート要素の幅と高さは両方とも 100% になります。

fixed

fixed 要素はブラウザ ウィンドウを基準にして配置され、スクロール バーでスクロールしません。

fixed は、ページの下端にバナーをレンダリングするためによく使用されます。例は次のとおりです:

<footer>FixedFooter </footer> 

footer {  bottom: 0;  left: 0;  right: 0;  position: fixed;} 

z-index

z-index 属性を設定するには、まず、position 属性を 1 に設定します相対絶対固定の。一般に、要素は表示どおりに Z 軸上に配置されます。最初に出現する要素は、後から出現する要素よりも下位にあります。 z-index を直接使用して、この重なり順を制御できます。 z インデックスが大きい要素が上に表示されます。

float をクリアする

<divclass="box-set">  <divclass="box">Box 1</div>  <divclass="box">Box 2</div>  <divclass="box">Box 3</div></div> 

.box-set {  background: #e8eae9;}.box {  background: #8ec63f;  height: 100px;  float: left;  margin: 10px;  width: 200px;} 

このコードを実行すると、.box-set 内の div は強調表示された灰色の背景を持つはずですが、すべての子要素がフローティングされた後、この灰色の背景色が表示されます。その高さは0です。

解決策は 2 つあり、オーバーフロー属性またはクリア属性を使用します。

オーバーフロー

.box-set {  background: #404853;  overflow: auto;} 

この方法には欠点があります。たとえば、スタイルを追加する場合、ネストされたスパン要素を親コンテナの外に移動する場合、または要素にボックス シャドウを追加する場合は、ドロップダウン メニューを作成する必要があります。 、要素のボックスの影が親要素内で切り取られる場合があります。

clearfix

1. 2 つの疑似クラス (親要素の before と :after) を使用し、コンテンツを "" に設定することにより、浮動要素の親コンテナーの前後に非表示要素を作成します。
2. クリアを設定: どちらもフロートをクリアします。
3. 表示を設定: テーブルを閉じたフロートに設定します。
4. IE6と互換性を持たせるためにzoom属性を追加しました。

.box-set:before,.box-set:after {  content: "";  display: table;}.box-set:after {  clear: both;}.box-set {  *zoom: 1;} 

ヒント

便宜上、クラス名を定義し、このクラス名を float をクリアする必要があるコンテナに追加できます。たとえば、クラス名 group を使用します。 float をクリアする必要があるコンテナーにこのクラス名グループを追加します。

参考記事

HTML と CSS の上級ガイド パート 2 - 詳しい位置決め