子要素のfloat時にも親要素の高さを保持させるには

親要素の内側に複数の子要素がある場合、デフォルトでは子要素は上下に表示され、親要素の高さもそれに応じて伸縮します。しかし、その子要素に「float: left; 」等を適用して横並びに表示させると、親要素の高さがなくなってしまうという問題があります。たとえばこんな感じの構造のとき：

<!--親要素の高さがなくなるパターン-->
<div class="親要素">
  <ul>
  <li class="子要素">○○</li>
  <li class="子要素">▽▽</li>
  </ul>
</div><!--/親要素-->

<style>
.子要素 {  float: left;  }
</style>

この記述だと親要素の高さがなくなってしまうのですが、cssを次のように記述すれば、親要素が子要素を包むだけの高さをもたせることができます：

<style>
/*子要素をfloatさせても親要素の高さが保たれる*/
親要素:after {
  content: ""; /*直後に空の疑似要素を指定*/
  display: block; /*ブロック要素にする*/
  clear: both; /*フロート解除*/
}
.子要素 {float: left;}
</style>

上記では子要素の例としてliを使ってますが、複数の異なる子要素であっても同じように運用できます。

よくある応用例としては、サイト本文エリア<div class=”content”>の内側に「記事本文」と「サイドメニュー」という2つの子要素を持つ構造のとき。
左側に記事本文、右側にサイドメニューが来るようにfloatさせると、親要素の.contentの高さがなくなってしまいますが、上記の記述方法を使えば綺麗に回避できます。

にほんブログ村 「ひとりごと」ランキング参加中です。ポチッと応援お願いします♪