【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がオススメ！同僚に差をつけよう！