先日floatの解除について質問をいただきました。
以前の記事の中でも簡易的な解説は載せていたのですが、今回は一歩踏み込んだ解説をしたいと思います。
とは言ってもぼくの発見した新しいテクニック、とかではなく世の中的には一般化されている知識のお話です。
floatについての基本的な解説はこちらの記事をご覧になってください。
下記から解説になります。
まずは親要素#containerの中で子要素(#boxA,#boxB)を左右にfloatさせるというレイアウトを目標にします。
下の画像が完成目標です
htmlの記述を以下のようにします
<div id="container"> <div id="boxA">boxAの範囲</div> <div id="boxB">boxBの範囲</div> </div>
ｃｓｓの記述を以下のようにします
#container{
width:800px;
margin:15px auto 0;
background-color:#FC9;
overflow:hidden;
padding:10px 0;}
#boxA{
width:300px;
height:500px;
background-color:#6CF;
padding:10px;
float:left;}
#boxB{
width:450px;
height:500px;
background-color:#9F6;
padding:10px;
float:right;}
上の記述ではイメージどおりにならず、下の画像のようになってしまいます。
親要素の背景が出ずに子要素しか表示されていません。
この原因はfloatの特性にあります。
floatの言葉の日本語訳は「浮かぶ」という意味です。この言葉通り指定した要素が浮くという考え方になるためfloatを適用すると下記の図のような状態になります。
このため親要素は「自分の中に何もない」と考えてしまいます。
基本的に親要素に高さの指定がなければ、自分の中の子要素分の高さを出すため「自分の中に何もない」と考えてしまうと下の図のような表示になってしまいます。
この問題を解決するためにいくつかの方法があります。
1.親要素の中に新たに要素を作り、そこでclearする
これが一番シンプルな方法です。
以前の記事の中でも紹介した記述ですが、今回は新たに要素を作れない場合を想定して記述を行いたいので割愛します。
2.clearfixというテクニックを使う
親要素にクラス名「clearfix」という名前を付け、cssで指示を出します。
指示の内容は「親要素内の最後に目に見えない要素を作成し、その要素でclearの指定をする」というものです。
clearfixの記述はどのブラウザに適用させたいかで変わってくるのですが、ここでは下記の記述をします。
.clearfix:after {
visibility: hidden;/*非表示に*/
display: block;/* ブロックレベル要素に */
font-size: 0;/*文字サイズを0に*/
content: " ";/* 新しい要素を作る */
height: 0;/*高さを0に*/
clear: both;/*回り込みの解除*/
}
/***IE6と7対策***/
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
この記述によってfloatの解除をすれば、親要素が最後に作られた目に見えない子要素の存在を認識し、高さを出すため背景が表示されます。
3.親要素にoverflow:hiddenを適用する
この記述でもfloatの解除が適用されます。
要素に対するデフォルトの設定はoverflowにvisibleを適用されています。
この設定では内容が親要素の高さを越えるとボックスからはみ出して表示されます。
そのためfloatした要素は親要素からはみ出して表示されるということになります。
それに対してoverflowにhiddenを適用するとボックスからはみ出した内容は非表示という設定になるのですが、親要素のheightを指定せずにautoの状態にした場合overflowの値にvisible以外を適用すると親要素の高さが子孫要素に依存するという仕様があるようです。（こちらの記事を参照しました。）
このため親要素の高さが出て、背景が表示されます。
最後にclearfixとoverflow:hiddenのどちらを使うのが良いのかという考え方についてですが、overflow:hiddenの指示の場合firefoxでの印刷時にトラブルが起こる場合があるようです。（これもまたこちらの記事からの参照です。）
このため用途によって使い分ける必要がありますね。
特に記述を面倒に感じずに印刷時のことも考慮に入れる場合は「clearfix」、記述が面倒に感じる（またはhtmlの記述が膨大になることを防ぎたい）し印刷のことは考えていないようなら「overflow:hidden」を使うといった使い分けで良いみたいですね。
