CSS レイアウト - clear と clearfix

clear属性

clear 属性は、クリアされた要素の横に浮動できる要素とどちらの側を指定します。

clear 属性は以下のいずれかの値を設定できます：

  • none - 両側に浮動要素が出现することを許可します。デフォルト値
  • left - 左側に浮動要素が出现しない
  • right - 右側に浮動要素が出现しない
  • both - 左側または右側に浮動要素が出现しない
  • inherit - 要素は親のclear値を継承します

を使用 clear 属性の最も一般的な使用法は、要素に以下を使用する場合です： float 属性の後。

浮動をクリアする際には、浮動とクリアを一致させる必要があります：もしある要素が左側に浮動するとき、左側をクリアする必要があります。あなたの浮動要素は引き続き浮動しますが、クリアされた要素はその下に表示されます。

以下の例では、左方向の浮動をクリアします。これは、（divの）左側に浮動要素が出现しないことを意味します：

例

div {
  clear: left;
}

自分で試してみる

clearfix Hack

もし要素がその要素を含む要素よりも高く、浮動している場合、それがコンテナの外に「溢れ出す」ことになります：

それでは、この問題を解決するために、包含要素に overflow: auto; を追加できます：

例

.clearfix {
  overflow: auto;
}

自分で試してみる

外側マージンと内側マージン（それ以外ではスクロールバーが見えるかもしれません）を制御できる場合、overflow: auto clearfix は非常に良い結果を得られます。しかし、新しい現代的な clearfix ハック技術はより安全に使用できます。以下のコードは多くのウェブサイトで使用されています：

例

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

自分で試してみる

後の章で学びます ::after 疑似要素。