Positionプロパティ

Static

positionプロパティのデフォルト値.
top、left、right、bottomなどの位置に関連する属性を使用すると、既存の位置には何の影響もありません.

Absolute

positionに関連するプロパティがある場合、既存のコードは元の場所から移動し、近い親では非静的親に対するデフォルト値の移動
周辺コードの再配置
ex)親の親が静的である場合、親の親に対して
つまり、親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親親

Relative

位置に関連する属性がある場合、既存のコードの元の位置に対する移動
absoluteと異なり、周囲コードは再配置されません

Fixed

既存の親ボックスに関係なく、ウィンドウブラウザのビューポート標準として固定されます.スクロール時に常に同じ位置を保つ

Sticky

stickyを使用する場合は、top、left、right、bottomという位置に関連するプロパティを同時に指定する必要があります.元の位置で、スクロール時に固定し、元の位置に固定します.
これは、相対的にすぐに位置を移動するのではなく、できるだけ他の要素と元の位置に維持し、親コンテナ内をスクロールするときに、スクロール方向(垂直top、左/水平eft、右)に基づいて、指定した位置に保つように努力する属性値です.
したがって、スクロール時に後ろに他の兄弟ノードがたくさんある場合、bottom:0を設定しても一番下に固定されません.
通常、一番上をスクロールするときにその位置に固定する場合はtop、一番下をスクロールするときにその位置に固定する場合はbottomを使用します.

属性の表示

Block

1行あたりのスペース
width、height、margin、paddingプロパティの反映
*代表的なBlock level要素:div、p、h 1など

Inline

1行に複数のエンティティを含めることができます
widthプロパティとheightプロパティの指定は無視されます(コンテンツサイズのスペースのみを使用します)
margin、paddingプロパティは左右の間隔のみを反映し、上下の間隔は反映しません.
コンテンツがない場合に表示されるdivとは異なり、spanは画面に表示するためにコンテンツを含まなければならない(コンテンツの長さと同じスタイルを適用する)
*代表的な行内要素:span、aなど

Inline-block

1行に複数のエンティティ(inlineエンティティなど)を並べて配置します.
ただし、インラインエンティティでは不可能なwidth、height、margin、paddingプロパティはすべて反映されます.

デフォルトの変更

特定のHTMLセグメントに指定されたdisplay属性値があるのは、ブラウザの組み込みスタイルが適用されているためであり、CSSによってユーザが必要とする属性値に変更することができる.

整理する

block:行ごとに段落(改行O)が表示され、1つの要素はコンテンツサイズに関係なくユーザーが指定した幅と高さで表示されます.

inline:1行に複数の段落(改行X)をマークします.内容がない場合はマークしません.内容がある場合は、スタイルマークのみをコンテンツサイズで適用します.

.

inline-block:1行に複数の段落をマーク(改行X)

none:要素は作成されていません.非占有スペース

Floatプロパティ

元のfloat属性は、主に画像内でテキストを囲むために生成される.

が最近使用を開始したdisplayプロパティのflex-boxは、広く使用される前にレイアウトにもよく使われていたプロパティです.

flex boxを使用してレイアウトが非常に便利になったため、floatはあまり使用されませんが、現在の業界では、過去に作成されたコードが表示される可能性がありますので、基本的な内容を理解したほうがいいです.
floatは、文字通り箱を左(左)または右(右)に「浮遊」させるレイアウト方法です.ここで、「リッチ」とは、基本的なHTMLドキュメントの配置プロセスから離れ、要素のエッジがページの左側または右側に移動することを意味します.

.box {
	float : value;
 }

デフォルトでは、上記のフォーマットでcssを記述し、floatプロパティ設定の値を以下に示します.

none

既定値、要素のオフセットなし

left

要素を左に浮動

すべての要素float:leftを与える場合

box 1のみフローティング:leftを与える場合

float:左だけbox 1にあげると、下のboxが重なるのが見えます.

right

要素を右側に浮動させる

すべての要素float:rightに

box 1のみ浮動:右側を与える場合

フローティング解除

フローティング要素はドキュメントのプロセスから離れているため、フローティングタグを使用する親タグが子タグの高さを揃えることができず、レイアウトがクラッシュします.
これはfloat属性を用いた場合に発生する現象であり,この問題を解決するためにはfloat을 해제を譲る必要がある.オフにすると、clearプロパティを使用してfloatの影響を回避できます.

親ラベルの最後の要素としてhtmlラベルを追加し、clearプロパティを適用します.

親ラベルにオーバーフロー属性と非表示値を適用します.

親ラベルにもfloatプロパティが適用されます.これにより、サブラベルのフローティング高さを認識し、対応する高さに占めることができ、レイアウトから逸脱することを回避できます.しかし、欠点は、フローティングがblocklevel要素の性質を消失させ、横幅を100%に再設定する必要があることです.

参考資料

DREAM符号化ELICSレイアウト
https://www.daleseo.com/css-display-inline-block/