W3Schoolサイト上のすべてのページが、この技術を採用している、我々はあなたがファイルを開く場合は、次の3つの上に私たちのクリーンアップのdivフッター、およびフッターのdivが表示されますCSSを使用するにはフローティングのままにしています。
CSS相対位置
相対的な位置は把握することは非常に簡単な概念です。要素の相対的な位置ならば、それは上のその場所に表示されます。次に、要素「相対する」とは、その出発点を移動するように、垂直方向または水平方向の位置を設定すること。
セットトップ20ピクセル場合、その場でトップ場所の下に20個のピクセルブロック。30個のピクセルに設定のままにすると、スペースの30個の画素は、素子の左側に右移動要素が作成されます。
#box_relative {
位置：相対。
左：30px;
トップ：20ピクセル;
}
下図のように：
相対的な位置決めを使用する場合に関係なく、移動するか否かの要素は依然として元の空間を占有することに留意されたいです。従って、可動要素は、他のブロックをカバーさせます。そして、我々はそれをカバーする箱3箱2を作る方法だと思いますが、100のような3優先順位の高い値にボックスのZインデックスと考えるのが自然であるが、これは私たちが望む結果を得ることはありません、しなければなりませんz屈折率箱2は、例えば-1等の低優先度に設定されている箱2はとてものみ設定されていない、ドキュメントフローの外であったので、私は推測z屈折率ボックス3それだけででき、2をボックスには影響をブロック2を動作させます。また、IE7の下にして、次のコードを試すことができます。
<HTML>
<頭にrunat = "サーバー">
<タイトル>無題ページ</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
スパン
{
背景色：レッド;
幅：30px;
高さ：30px;
}
#box_relative
{
位置：相対。
左：10pxの;
トップ：10pxの; 背景色：グレー; Zインデックス：-1。
}
</スタイル>
</ head>
<body>
<スパン> </ span>の<スパンID = "box_relative"> </ span>の<スパンスタイル= "z屈折率：30"> </ span>を
</ BODY >
</ HTML>
CSS絶対位置
絶対位置文書要素の位置は、流れから独立して、そのためのスペースを占有しません。別のこの相対位置は、実際には、ストリーム中のその通常の位置に要素の相対的な位置が、通常のストリームのローカリゼーションモデルの相対的な位置決めの一部とみなされます。
絶対配置要素のような他の要素の通常の流れのレイアウトは存在しません。
#box_relative {
位置：絶対。
左：30px;
トップ：20ピクセル;
}
下図のように：
要素の位置絶対位置に最も近い位置指定祖先要素、要素には位置指定祖先要素を持たない場合、に対する位置最初のブロックを含みます。
それぞれの場所の意味を覚えて位置決めするための主な問題。相対位置は、ドキュメント内の要素の初期位置「からの相対」であり、そこにはすでにターゲットにされている場合、絶対位置は、位置付け祖先最も近い祖先「に反対」されています。だから今、私たちはそれを学んだ知識を確認しましょう要素は、次いで、「に対して」は、第1のブロックを含みます。
注：異なるユーザエージェントを、キャンバスまたはHTML要素であってもよい第一のブロックを含みます。
ヒント：ので、絶対配置のボックスは、ドキュメントフローとは何の関係もありませんので、彼らは、ページ上の他の要素をカバーすることができます。設定することにより、Z-indexプロパティをブロックの積層順序を制御します。
あなたは、フレーム3の同じパスをしたい場合は、2のz-indexが、フレーム2に設定し、それが唯一のフレーム3上に設けられている場合は無効です。また、IE7の下にして、次のコードを試すことができます。
<HTML>
<頭にrunat = "サーバー">
<タイトル>無題ページ</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
スパン
{
背景色：レッド;
幅：30px;
高さ：30px;
}
#box_relative
{
位置：絶対。
左：20ピクセル;
トップ：20ピクセル; 背景色：グレー。
}
</スタイル>
</ head>
<body>
<スパンスタイル= "z屈折率：30"> </ span>の<スパンID = "box_relative"> </ span>の<スパンスタイル= "z屈折率：30 「> </ span>を
</ BODY>
<
CSSフロート
右フローティングフレーム1は、それが右に、ドキュメントストリームから移動するとき、それが含むボックスの右端の右端を打つまで、以下を参照されたいです。
再びときに文書から流れ左フローティングフレーム1、以下を参照のボックスの左端を含む行のその左端まで左に移動します。それはもはや、文書の流れであるので、それはスペースを占有しないため、実際には、フレーム2、視界から消えるために、フレーム2をカバーしていません。
すべての3つのボックスを左に移動された場合、それは左に浮動ボックス全体でさらに2つのブロックまでのフローティング、フローティング・フレームに当たるまで左を含むブロック。
フレームは、水平に配置された3つの浮動要素を収容するには狭すぎる含まれている場合は十分なスペースがあるまで、スライダの下の他は、下方に移動します。彼らは下方に移動することができて、フローティング要素の高さが異なる場合、他の浮動要素は、「スタック」です。
CSSフロートプロパティ
CSSでは、我々はフロートプロパティを通じて達成要素を浮かべ。
フロートプロパティの詳細については、リファレンスマニュアルを参照してください：CSSプロパティをフロート。
ラインボックスとクリーンアップ
フローティングボックス次の行ブロックは、このようにブロックの周りにライン・ボックスをフローティング、フローティングフレームに余地を残して、短くなります。
そのため、画像の周囲にテキストを作るために、フローティングボックスを作成します：
浮動ボックスの周りのラインボックスを防ぐために、ボックスには適用する必要がある明確なプロパティを。明確な属性値が残されてもよい、右、境界は次のフレームを浮上ないことを示し、両方、またはnone。
この効果を達成するために、クリーニング要素があることの外縁に垂直要素の上端まで浮動次のブロックを追加するのに十分なスペース：
これは、要素が部屋を作るために周りに浮くことができます、便利なツールです。
のは、を見て、詳細に浮いクリーンアップしてみましょう。あなたが左に浮動テキストブロックの画像を作成し、背景色や枠線を持つ別の要素内に含まれ、この画像とテキストをしたいしたいとします。あなたは、次のコードを書くかもしれません。
.news {
背景色：グレー。
国境：固体1pxの黒。
}
IMG {.news
フロート：左;
}
、P {.news
フロート：右。
}
<DIV CLASS = "ニュース">
<IMG SRC = "ニュース-pic.jpg" />
<P>一部のテキスト</ P>
</ div>
この場合、問題があります。ドキュメントフローのうちフロートので、そのスペースを占有していない画像とテキストのdivに囲まれています。
どのように視覚的で浮動要素を囲むサラウンド要素を作るには？どこかの明確なこの要素に適用する必要があります。
クリーンアップするために使用することができます既存の要素が存在しないため、残念ながら、新しい問題があるので、我々は唯一の空の要素を追加し、それをクリーンアップすることができます。
.news {
背景色：グレー。
国境：固体1pxの黒。
}
IMG {.news
フロート：左;
}
、P {.news
フロート：右。
}
<DIV CLASS = "ニュース">
<IMG SRC = "ニュース-pic.jpg" />
<P>一部のテキスト</ P>
</ div>
.clear {
clear: both;
}
<div class="clear"></div>
このように、私たちは、所望の効果を達成することができますが、余分なコードを追加する必要があります。そこの要素をクリアするために適用することができ、多くの場合ですが、時々無意味なタグが追加レイアウトする必要があります。
しかし、それは、フローティングコンテナのdivで、別の方法もあります。
.news {
背景色：グレー。
国境：固体1pxの黒。
}
IMG {.news
フロート：左;
}
、P {.news
フロート：右。
}
<DIV CLASS = "ニュース">
<IMG SRC = "ニュース-pic.jpg" />
<P>一部のテキスト</ P>
</ div>
float: left;
このように、私たちは、所望の効果が得られます。残念ながら、次の要素は、この浮動要素によって影響を受けることになります。この問題を解決するために、一部の人々は、これらの浮動きれいに適切な意味のある要素（サイトの多くの場合、フッター）を使用し、float型にレイアウト内のすべてに選択します。これは、不要なマークを減らすか、または排除することができます。
実際には、サイトW3School上のすべてのページがこの技術を採用している、我々はあなたがファイルを開いた場合、あなたが私たちのdivクリーンアップフッター、および3以上のフッターが表示されますCSSを使用するには、フローティングdiv要素を残しています。