floatでレイアウトした回り込みを解除する２つの方法

困り顔の眼鏡の男性

floatでレイアウトした枠の背景が表示されない！
floatでレイアウトしたら回り込みさせたくない要素までまわりこんでしまう！

コーディングをしたことがある方なら誰もが一度は経験したことがあることだと思います。

本日はfloatでレイアウトした回り込みを解除する方法を二つご紹介します。

clearfixを使用して回り込みを解除する

使用方法はいたって単純です。floatで周り込みを設定した要素の親要素にclearfixを設定するだけです。
注意点としては現在は過去のブラウザのサポートを終了し、非常にシンプルなスタイルになっていますが、過去のバージョンにも対応する必要がある場合はそれに対応したclearfixの記述が必要です。

clearfixの設定例

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

2016年1月12日にIE8以前のMicrosoftのサポートが終了いたしました。
それにともない、モダンブラウザのみに対応したclearfixが上記です。
特別な理由がないかぎり上記のclearfixを使用することをお勧めします。

overflow:hiddenを使用して回り込みを解除する

clearfixと共に回り込みの解除に使用されるプロパティーとしてよく利用されるのがoverflowです。
これの値をvisible以外に設定することでも回り込みは解除できます。
autoやscrollを設定するとスクロールバーなどが表示されることもあるので、hiddenを設定することが多いです。
この方法ではcssをシンプルをにできる反面、ボックスをはみ出したあしらいなどを使用したときに切れてしまうというデメリットがあります。

overflow:hiddenの設定例

.box {
  overflow: hidden;
}

古いブラウザに対応したclearfix

最後に古いブラウザにも対応した過去のclearfixも紹介します。。

初期のclearfix

.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;  
  clear: both; 
  visibility:hidden;
}
    
.clearfix {display: inline-block;} 

/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix {display:block;}
/* End Hack */

当時はIEやネットスケープなど様々なブラウザに対応するために非常に長いCSSですね。
最近はここまで長いclearfixは使用しません。

micro clearfix

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

モダンブラウザとIE6,7に対応したclearfixです。初期の物に比べればかなりシンプルになっております。
すこし古いIEまで対応する必要がある場合はこちらのバージョンを使用するのが良いでしょう。

回り込みの解除は癖をつけるとなんでもないことです。floatを設定したら必ず回り込みを解除する癖をつけましょう。