【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.


コメントを残す

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