基礎39. 5つの回り込み（float）の解除方法

floatの解除・回避方法

floatを指定した要素は、親要素から認識されなくなります。
そのため子要素に幅、高さがあっても、親要素はそれを無視してしまい、背景が表示されなくなったり、次の要素が食い込んだりします。
これを回避する5つのテクニックを紹介します。

clear: both;を利用した解除

clearプロパティは、floatの回り込みを解除するプロパティです。
clearプロパティは、float指定した要素の次の要素に指定します。
float要素が連続している場合、一番最後のfloat要素の次の要素に指定します。
clearプロパティは、both以外にもfloat: left;のみを解除するclear: left;。float: right;のみを解除するclear: right;があります。基本的にclear: both;で対応すれば問題ありません。

<div class="wrap">
  <div class="inner">インナーブロック</div>
  <div class="inner">インナーブロック</div>
  <div class="cb">float解除</div>
</div>

.wrap{
  width: 440px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background-color: #ddd;
}
.inner{
  float: left;
  width: 198px;
  border: 1px solid #333;
}
.cb{
  /* floatを解除 */
  clear: both;
}

<ul class="list">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li class="cb">リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

.list{
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
}
.list li{
  float: left;
  width: 98px;
  border: 1px solid #333;
}
.cb{
  clear: both;
}

親要素に高さ（heightプロパティ）を指定して回避

float指定した要素の高さが変化しない場合は、親要素にheightプロパティで高さを指定して回避することができます。
ナビゲーションなど、高さが変化しない箇所で利用できます。

<ul class="list">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

.list{
  width: 400px;
  /* あらかじめ親要素に高さを指定して回避 */
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
}
.list li{
  float: left;
  width: 98px;
  border: 1px solid #333;
  line-height: 30px;
}

親要素でoverflow:hidden;を指定して回避

子要素がすべてfloat指定の場合に使える回避方法です。
親要素にoverflow:hidden;を指定すると、親要素は、float指定した子要素の高さを認識することができます。
親要素にheightを指定して回避する場合と違い、子要素のコンテンツが増減する箇所でも利用できます。
指定が簡単なため、利用しやすいというメリットがあります。

<ul class="list">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

.list{
  /* 親要素にoverflowを指定して回避 */
  overflow: hidden;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background-color: #ddd;
  list-style: none;
}
.list li{
  float: left;
  width: 98px;
  border: 1px solid #333;
  line-height: 30px;
}

親要素にclearfixを指定して解除

clearfixとは、floatを回避するCSSのテクニックの総称で、プロパティではありません。クリアフィックスと呼びます。
clearfixは、親要素にClass名を付けて指定します。
clearfixには様々なバリエーションがありますが、どれもfloat問題を回避するという点では同一です。
clearfixの仕組みは、親要素内の最後の子要素をCSSで擬似的に作り出し、それにclear: both;を指定して、floatを解除しています。
CSSで擬似的に要素を作る仕組みを疑似要素と言います。
疑似要素は、応用63. CSSで要素をつくる疑似要素（::before, ::after）で詳しく解説しています。
今回は、様々なclearfixの中から「micro clearfx」という手法を紹介します。IE6 / 7に対応する必要がなければ最後の行は削除してかまいません。

/* micro clearfx */
.cf:before, .cf:after {
    content:"";
    display:table
}
.cf:after { clear:both }
.cf { zoom:1 } /* IE 6/7用。不要なら削除可。 */

list{
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background-color: #ddd;
  list-style: none;
}
.list li{
  float: left;
  width: 98px;
  border: 1px solid #333;
  line-height: 30px;
}

後は、親要素にcfというクラス名を指定するだけです。

<!-- 親要素にcfクラスを指定 -->
<ul class="list cf">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

親要素にdisplay: flow-root;を指定して解除

display: flow-root;は、比較的新しいCSSの仕様で、float解除専用です。
overflow: hidden;の問題も発生せず、clearfixのように設定が面倒でもありません。親要素にただ指定するだけです。
floatを解除する機能以外は、display: block;と同じです。

<ul class="list cf">
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

.list{
  display: flow-root;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background-color: #ddd;
  list-style: none;
}
.list li{
  float: left;
  width: 98px;
  border: 1px solid #333;
  line-height: 30px;
}

どの解除・回避方法を使うべきか

現状、floatの回避は、overflow:hidden; または、clearfixで対応するのがベストです。
IEに対応しなくてもいい場合は、display: flow-root;がベストです。
どの回避方法を選択するかは、それぞれの特徴とデメリットを考えながら対応していくと良いでしょう。

まとめ

• overflow:hidden;とclearfixは、親要素に指定して回避するテクニック
• floatの解除は、overflow:hidden;または、clearfixが現状ベスト
• Internet Explorerに対応しないなら、display: flow-root;がベスト