すたらブログ

文系Webプログラマの備忘録

CSS: フロートの解除にはクリアフィックスが便利

CSS

目次

フロートの解除について、順を追って解説します。

下記のような表示を目指してHTMLとCSSを記述します。

<div class="container">
  <div class="item">AAA</div>
  <div class="item">BBB</div>
  <div class="item">CCC</div>
</div>
<div class="container">
  <div class="item">あああ</div>
  <div class="item">いいい</div>
  <div class="item">ううう</div>
</div>
<div class="container">
  <div class="item">阿阿阿</div>
  <div class="item">以以以</div>
  <div class="item">宇宇宇</div>
</div>
<div class="footer">
  フッター
</div>

.container {
  margin: 20px 0;
}
.item {
  float: left;
  margin-right: 10px;
  width: 100px;
}

clearしないとどうなるか

floatを使った後でclearしないと、表示が大きく乱れてしまいます。

フロートの親要素の次の要素でクリアすると

floatを包む親要素の次の要素にclearを指定します。
これで問題ない場合もありますが、記述したスタイル指定が正しく反映されない場合も多いです。

.container {
  clear: left;
}
.footer {
  clear: left;
}

フロートの直後に空要素を設置すれば解決

floatを指定する要素の直後に、空要素を設置してclearを指定します。

<div class="container">
  <div class="item">AAA</div>
  <div class="item">BBB</div>
  <div class="item">CCC</div>
  <div class="clear-element"></div><!-- 空要素 -->
</div>

.clear-element {
  clear: both;
}

クリアフィックスを使えばキレイ

HTML文中に空要素を記述せず、:afterというCSSの擬似要素を用いて空要素を作成します。
これならば、デザインのためだけ不要なHTMLタグを記述しなくてすみます。
なお、対応ブラウザはIE8以上です。
IE6,7向けの記述は下記を参考にしてください。

<div class="container clearfix"><!-- clearfixクラスを適用 -->
  <div class="item">AAA</div>
  <div class="item">BBB</div>
  <div class="item">CCC</div>
</div>

.clearfix:after {
  clear: both;
  content: '';
  display: block;
}

擬似要素:afterについて

:afterで作成される要素は、直後ではなく内部の末尾に設置されることに注意してください。