CSSレイアウトにおけるフロート属性と位置属性の違い

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

position 属性は、要素に適用する配置方法のタイプ (静的、相対的、固定、絶対的、または固定) を指定します。

位置プロパティ

position 属性は、要素に適用する配置方法のタイプを指定します。

位置の値には次の 5 種類があります。

静的
相対的
修理済み
絶対
粘着性

要素は実際には top、bottom、left、right 属性を使用して配置されます。ただし、位置プロパティが最初に設定されていない限り、これらのプロパティは効果がありません。位置の値に応じて動作が異なります。

CSS レイアウト - フローティングとクリア

float プロパティ
float プロパティは、コンテナー内のテキストの左側に画像をフロートするなど、コンテンツの配置と書式設定に使用されます。

float プロパティは、次のいずれかの値に設定できます。

left - 要素はコンテナの左側にフロートします
right - 要素はコンテナの右側にフロートします
none - 要素はフロートしません (テキスト内に表示される場所に表示されます)。デフォルト値。
継承 - 要素は親の float 値を継承します。最も単純な形式では、float プロパティを使用して、画像 (新聞など) をテキストで囲む効果を作成できます。

float: left|right; は行を自動的に配置して折り返しますが、フロートをクリアするには clear が必要です。display: inline-block は float を置き換えて同じ効果を実現できる場合があります。

position: absolute|relative; 上、左、その他の位置と調整します。

使用：

position: absolute指定すると、要素はドキュメントフローの外側に配置されます。配置された要素はドキュメント内の位置を占有せず、別のレイヤーに表示されます。z-index を設定できます。 PS のレイヤー効果は位置:絶対です。
また、フロートを使用すると、要素はドキュメントフローから外れますが、ドキュメントまたはコンテナー内の位置を占有したまま、ドキュメントフローと他のフロート要素を左または右に押し込み、改行が発生する可能性があります。画像のテキストラップレイアウト効果はフロートです。
display の inline-block はドキュメントフローを離れず、ブロック要素は img や input のデフォルトの効果と同様に、大きな文字としてドキュメントフローに埋め込まれます。

CSSレイアウトのフロートと配置属性の違い

CSS には、通常フロー、フローティング、絶対配置という 3 つの基本的な配置メカニズムがあります。1. 通常フロー通常フローにおける要素ボックスの位置は、XHTML 内の要素の位置によって決まります。ブロックレベル要素は上から下に配置され、ボックス間の垂直距離はボックスの垂直余白によって計算されます。インライン要素は一列に水平に配置されます。通常フローは、ブロックレベル要素やインライン要素など、HTML ドキュメント内の要素を、ドキュメント内の表示属性に従って表示します。

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

float:right/left は、親要素に向かって設定されるサブブロックレベル要素フローの配置であり、配置に使用されるキーワードは margin/padding です。兄弟ブロック要素間の相対的な配置は、移動後の新しい位置に基づいて再レンダリングされます。重なり合う可能性があり、元の位置はクリアされます。

両者の最大の違いはポジション保持です。

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