HTML/CSS - float

🕹 float

イメージをテキストで包むために存在する.使い方が簡単だ

div {
	float: left;
} 

🕹 right、left、none、initial、inheritプロパティを指定できます:)

⚡️ clear

あちこちでfloatを遊んでいて、floatが狂っているのが見えます.😱
次の例に示すように、float要素は隣接する他の要素に影響を与えることでテキストレイアウトに影響を与えることがわかります.🤯
このとき使用する操作制御方法🕹clearだ!

🕹 このように入力すると、他の要素はfloat要素を避けて逃げます.
float:rightの場合はclear:rightを入力する必要があります.

⚡️ clearfix

これはあまり使われない技術ですが、まず見てみることにしました.
float要素が大きすぎると大騒ぎになります.🕹オーバーフロー:autoプロパティで制御できる方法はclearfixです.

⚉floatレイアウト例

floatはあまり使いにくいように見えますが、以下のレイアウトを実現する際に実現しやすいという利点があります.仮想のaside領域をフローティングしたり、横方向の長さを指定したりできます.
次に、ソートする内容の余白値(フローティング要素の水平方向の長さ)を入力し、🤘
🕹 pxに加えて、横長%の->幅:25%を入力することもできます.