【8/27まで】Udemyの人気コースが今なら1,200円から!!

【CSS3】フロート(float)を解除する方法

【CSS3】フロート(float)の仕組みを理解する

floatを解除する方法


STEP.1
divの箱を4つ作る

divの箱を4つ作ります。

See the Pen
float1
by shiakisudev (@shiakisu)
on CodePen.



STEP.2
div1要素にfloat:leftを設定する

div1要素にfloat:leftを設定します。

See the Pen
float2
by shiakisudev (@shiakisu)
on CodePen.

div1要素にfloat:leftを設定するとdiv1要素が浮くため、このままでは後続div2以降の要素が上に重なってしまいます。


STEP.3
div2要素の重なりを回避する

div2要素に「overflow:hidden;」を指定すると、重ならなくなります。

See the Pen
float3
by shiakisudev (@shiakisu)
on CodePen.



別解
div2要素の回り込みを回避す

フロートが不要な箇所では 「clear:both;」を指定することでfloat属性を解除することができます。
回り込んでしまったdiv2要素に対して「overflow:hidden;」の代わりに「clear:both;」を指定すると次の挙動になります。

See the Pen
float4
by shiakisudev (@shiakisu)
on CodePen.




以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です