デザインサンプルで学ぶCSSによるスタイリング～「floatプロパティによるレイアウト」編

CSSで作るWeb用パーツ（8）

floatレイアウトのポイント 2

後続の兄弟要素がない場合には、親要素にoverflow:auto;を指定

　floatさせた要素のすぐ後ろに兄弟要素がある場合には、先の方法で解決できるのですが、次の例のように、兄弟要素がない場合、「親要素の背景が効かない」といった問題が起こりやすくなります。

リスト4　後続の兄弟要素がない場合／HTML（sample03.html）

<div id="wrapper">
  <div id="boxA">A</div>
  <div id="boxB">B</div>
</div>

　#wrapperの中に、#boxAと#boxBのボックスを作成し、それぞれ左右にフロートさせました。親要素#wrapperにはグレー（#ccc）の背景色を指定していますが、意図したように表示されません。これは、本来、親要素の中身である子要素が浮いている（フロート）状態のため、中身としてみなされず、子要素の高さが算出されないためです。

リスト5　親要素の高さが算出されない例／CSS（sample03.html）

#wrapper {
  width: 620px;
  padding: 10px;
  background-color: #ccc;
  margin: 0 auto;
}
#boxA {
  width: 200px;
  float: left;
}
#boxB {
  width: 400px;
  float: right;
}

図4　親要素の高さが算出されない例（sample03.html）

　この時、親要素のoverflowプロパティの値をautoまたはhiddenにすると、子要素のフロートボックスも高さの算出に加えることができます（厳密には値をscrollとしても、高さが算出されますが、中身の高さによらずスクロールバーが表示されます）。サンプルでは、親要素#wrapperに、overflow:autoを指定しました。

リスト6　親要素の高さが算出された例／CSS（sample03.html）

#wrapper {
  width: 620px;
  padding: 10px;
  background-color: #ccc;
  margin: 0 auto;
  overflow: auto; /* 中のフロートボックスを含めて高さ算出 */
}

図5　親要素の高さが算出された例（sample03a.html）

後続の兄弟要素がない場合、親要素にclearfixを指定して回り込みを解除

　後続の兄弟要素がないケースで、overflow:autoを指定する方法は、フロートボックスの高さを算出させるテクニックですが、同じように後続の兄弟要素がないケースで、回り込みを解除する方法として、clearfixというテクニックもあります。これは、簡単に言うと:after擬似要素で作成したコンテンツにclear:both;を指定して回り込みを解除するテクニックです。

リスト7　clearfix／CSS（sample03b.html）

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

　親要素にclearfixを指定して回り込みを解除しますが、使いまわしが効くようにclass化して使用するのが一般的です。

リスト7　後続の兄弟要素がない場合：clearfix使用例／HTML（sample03b.html）

<div id="wrapper" class="clearfix">
  <div id="boxA">A</div>
  <div id="boxB">B</div>
</div>

図6　clearfix使用例（sample03b.html）

　float問題を解決する手っ取り早い方法は、overflow:autoを指定する方法ですが、clearfixをクラス化して指定する方法は、複数人で作業する際に、適用箇所が分かりやすく管理がしやすいというメリットがあります。