CSSレイアウト - clearとclearfixについての解説

1. clear: clearプロパティは、浮動した要素の後に続く要素がどのように配置されるかを指定します。clearプロパティには以下の値があります。

• none: デフォルトの値で、要素は浮動した要素の横に配置されます。
• left: 左側に浮動した要素の後に配置されます。
• right: 右側に浮動した要素の後に配置されます。
• both: 左右いずれかの側に浮動した要素の後に配置されます。

以下は、clearプロパティを使用して要素の配置を制御する例です。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

2. clearfix: clearfixは、要素内の浮動した要素に対してクリアを適用するためのクラスです。以下のようにclearfixクラスを要素に追加することで、要素が浮動した要素を適切に囲むようになります。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  zoom: 1; /* IE 6/7用の対策 */
}

上記のコードでは、clearfixクラスにzoomプロパティを設定しています。これは、古いバージョンのInternet Explorer（IE 6/7）でclearfixが正常に機能するようにするための対策です。