はじめに
floatを使ったレイアウトは、CSSレイアウトの基本と言っても過言ではありません。しかし、floatを使用すると「親ボックスの背景が表示されない」「後続のボックスのレイアウトが崩れる」などの問題も起こりがちです。これらの問題を回避する方法もあわせて紹介します。
対象読者
- （X）HTMLとCSSの基本を理解している方。
- デザインのコツを学びたい方。
必要な環境
本連載で動作確認を行ったブラウザは次の通りです。
- Windows 7 Internet Explorer 11（以下IE 11）
- Windows 7 Firefox 30
- Windows 7 Chrome 35
floatレイアウトのポイント 1
floatプロパティは、要素を左または右に浮動化するプロパティで、後に続く要素は、その反対側に回り込みます。図1のように、floatプロパティを使うと、通常はHTMLの出現順に縦に並ぶ要素を横並びに配置することができます。
floatレイアウトは実務でもよく使われるテクニックです。使いこなすことができれば、段組レイアウトをはじめ、挿絵の周りにテキストを流し込んだり、コンテンツを横並びに配置したりと、レイアウトの幅が広がります。
使い勝手が良く、便利な一方で、「後続の要素のレイアウトが崩れる」「親要素の背景が効かない」といった問題も起こりがちですが、これらは簡単なポイントさえ押さえておけば回避できます。
後続要素のレイアウト崩れはclearプロパティで防ぐ
次の例では、親ボックス#wrapperを作成し、その中に、#boxA、#boxB、#boxCを作成しています。
<div id="wrapper"> <div id="boxA">A</div> <div id="boxB">B</div> <div id="boxC">C</div> </div>
CSSでは、#boxAをfloat:left;で左側に、#boxBをfloat:right;で右側にフロートさせました。
#wrapper {
width: 620px;
padding: 10px;
background-color: #ccc;
margin: 0 auto;
}
#boxA, #boxB {
background-color: red;
～中略～
}
#boxA {
width: 200px;
float: left; /* 左フロート */
}
#boxB {
width: 400px;
float: right; /* 右フロート */
}
#boxC {
background-color: blue;
～中略～
}
このままだと、フロートさせた#boxA、#boxBの後に続く要素#boxCが意図したように配置されず、レイアウトが崩れます。
後続要素のレイアウト崩れは、floatボックスの後に続く要素が、その反対側に回り込むという仕様のため起こります。これを回避するには、clearプロパティで回り込みを解除すれば良いのです。今回は左右にフロートさせているので、clear:both;を指定します。左フロートの回り込みを解除したい場合は、clear:left;、右フロートの場合はclear:right;を指定します。
#boxC {
clear: both; /* 回り込みを解除 */
～略～
}
floatプロパティを指定した要素の後に、兄弟要素がある場合には、そこにclearプロパティを指定して回り込みを解除しましょう。これで後続の要素のレイアウト崩れは、だいたい防げるはずです。
