floatプロパティを使用したレイアウトでは、clearプロパティを使用して回り込みを解除しなければなりませんでしたが、ここでは、さらに回り込みを解除する方法を紹介します。
clearfixによる解除
clearプロパティは回り込みを解除したい要素に対して指定しますが、それが存在しない場合、新たな擬似要素を作り出して回り込みを解除します。
【手順】
- 親要素に対してclearfixを適用するためのクラスを指定
- CSSで擬似要素を作り出し、display: block; clear: both; を指定
See the Pen
4-7_1 by Koji Seto (@yseseto)
on CodePen.
overflow: hidden; による解除
overflowプロパティに対してhiddenを指定すると、上記clearfixを同じように回り込みを解除することができます。
【手順】
- 親要素に対してoverflow: hidden; を設定