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

divの箱を4つ作ります。

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

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

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

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

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

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

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

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