[CSSレイアウト例】float（フロート）、position（ポジション）プロパティの差分によるCSSレイアウト

CSSレイアウト - positionプロパティ

position属性は、要素に適用される位置決め方法の種類を指定します（static、relative、fixed、absolute、sticky）。

position 属性

position 属性は、要素に適用される位置決め方法の種類を指定します。

位置の値は5種類ある。

スタティック
相対
固定
絶対
ネバネバ

要素の位置は、実際にはtop, bottom, left, right属性を使って決められます。しかし、これらの属性は、position属性が先に設定されていないと機能しません。positionの値によって、それぞれ異なる動作をします。

CSSレイアウト - フロートとクリア

float プロパティ
float属性は、コンテンツの位置や書式を設定するために使用します。例えば、画像をコンテナ内のテキストに対して左側にフロートさせることができます。

float属性には、以下のいずれかの値を設定することができます。

left - 要素はコンテナの左側に浮動します。
right - 要素がコンテナの右側に浮動します。
none - 要素はフロートしません (テキストにちょうど表示される場所に表示されます)。デフォルトの値です。
inherit - 要素は、親の float 値を継承します。
最も単純な使い方として、float属性は、画像を囲むテキストの効果を（新聞上で）可能にします。

float: left|right; は自動折りたたみのために自動整列させることができますが、clear floats で動作させるためには clear が必要です。

position: absolute|relative; top、left などで位置決めする必要があります。

使用してください。

の位置に移動します。 absolute は、要素をドキュメントフローから取り出します。位置づけられた要素はドキュメント内の位置に等しくなく、z-indexを設定できる別のレイヤーにレンダリングされます。
float はまた、ドキュメントフローから外れてもドキュメントやコンテナ内の位置を占め、ドキュメントフローや他の float 要素を左や右に圧迫し、場合によっては改行を引き起こすことがあります。画像のテキスト回り込みレイアウト効果もfloatです。
displayのinline-blockはドキュメントフローから抜け出せず、ブロック要素をドキュメントフローの中に埋め込まれた大きな文字として扱い、imgやinputのデフォルト効果と同様である。

CSSレイアウトのfloat属性とpositioning属性の違いについて

CSSには、ノーマルフロー、フロート、絶対位置決めの3つの基本的な仕組みがある I. ノーマルフロー ノーマルフローにおける要素ボックスの位置は、XHTMLにおける要素の位置で決定される。ブロックレベルの要素は上から下へ順次配置され、ボックス間の垂直距離はボックスの垂直マージンから計算される。行内要素は行内に水平に配置される。通常のフローとは、ブロックレベル要素、インライン要素などのhtml文書内の要素が、文書内の表示属性に従って配置されることです

postion:relative は、position キーワード left/right/top/bottom を用いた、子ブロックレベル要素の親に対する相対的な位置決めです。兄弟ブロック要素は互いに相対的に位置決めされますが、位置を移動しても元の位置が保持されます。後続の兄弟要素は、移動前の位置に基づいて位置決めされます。

float:right/left は、子ブロック要素の集合の親向きの位置決めで、位置決めキーワードは margin/padding を使用します。兄弟要素間の相対的な位置決めは、移動後の新しい位置に基づいて再描画され、元の位置がクリアされて重なることもあります。

両者の最大の違いは、位置の保持です。

この違いを利用して、スライドドアのメニューのCSSコードを作成することもできます。

スクリプトハウスのエディターによって追加された

一般的なページのレイアウトは、フロートを使用することですが、フロートをクリアするために注意を払う必要があり、いくつかの特殊効果は、一般的にpositonを使用して、positon要素がいくつかのアラートボックス、特殊効果などのために便利な、ページ上のどこにでも表示することができます。

F12で見たページを元に、じっくりと詳細を勉強すれば、楽しみが広がりますし