6日でできる 新HTML&CSS入門｜floatの問題点と対策
floatは便利だけれど、放っておくとレイアウトが崩れやすい。
clearとclearfixを理解して、回り込みを安全にコントロールしよう。
CSSのfloatは、要素を左や右に寄せて、ほかの要素をその横に回り込ませるためのプロパティです。画像の横に文章を配置したり、複数のボックスを横並びにしたりできるため、昔からWebレイアウトでよく使われてきました。
しかし、floatは便利な反面、少し扱いに注意が必要です。floatを指定した要素は、通常の文書の流れから外れたような扱いになります。そのため、後に続く要素が意図しない位置に入り込んだり、親要素の高さがうまく計算されなかったり、要素が重なって見えたりすることがあります。
特に初心者のうちは、「ボックスを横に並べたつもりなのに、次の要素が変な位置に表示される」「要素が消えたように見える」「親の枠線が中身を囲んでくれない」といったトラブルに戸惑いやすいです。
この記事では、floatで起こりやすい問題点を確認しながら、clearプロパティによる解除方法、clearfixを使ったグループ単位の対策、そして現在のWeb制作での考え方までを丁寧に解説していきます。
floatで起こる代表的な問題
floatを使うと、要素を横に並べたり、文章を画像の横へ回り込ませたりできます。ただし、floatを指定した要素と、floatを指定していない通常の要素が混ざると、レイアウトが思ったとおりにならないことがあります。
よくある問題は、次のようなものです。
| 問題 | 起こること |
|---|---|
| 後続要素が回り込む | 下に置きたい要素がfloat要素の横に入り込む |
| 要素が重なって見える | 通常のブロック要素の背景や枠がfloat要素の下に入り込む |
| 親要素の高さがなくなるように見える | floatした子要素を親要素が高さとして認識しないことがある |
| 解除しないと影響が続く | その後の要素までfloatの影響を受けることがある |
floatの問題は、要素が本当に消えているわけではありません。多くの場合、floatの影響で別の要素の後ろに入り込んだり、回り込みによって意図しない位置に表示されたりしています。
図1：floatを解除しないと後続要素が重なることがある
この図から分かること
floatを指定した要素は、通常のブロック要素とは少し違う動きをします。floatの影響を解除しないと、後に続く要素が横に回り込んだり、重なって見えたりすることがあります。floatを使うときは、横並びにすることだけでなく、その後の要素をどう表示するかまで考えることが大切です。
floatした要素は通常の流れから外れたように扱われる
HTMLの要素は、通常は上から下へ順番に配置されます。たとえば、<div>を3つ並べると、基本的には縦方向に1つずつ表示されます。
しかし、floatを指定した要素は、左または右へ寄せられ、通常の文書の流れから外れたような状態になります。そのため、後に続く通常のブロック要素が、float要素の存在を高さとしてうまく扱えず、float要素の下に入り込んだように見えることがあります。
| 要素の状態 | 表示のされ方 |
|---|---|
| float指定あり | 左または右に寄り、後続の内容を回り込ませる |
| float指定なし | 通常の文書の流れに従って配置される |
| clear指定あり | floatの影響を避けて下に回り込む |
ここで大切なのは、floatは単純な横並び専用の機能ではなく、回り込みを作るための機能だという点です。横並びのために使った場合でも、後続要素には回り込みの影響が残ることがあります。
問題例：floatしない要素が重なって見える
まずは、floatを指定した要素と、floatを指定していない要素が混ざったときの問題例を見てみましょう。
このサンプルでは、1つ目と2つ目のボックスにfloat: left;を指定しています。3つ目のボックスにはfloatを指定していません。そのため、3つ目のボックスが意図した位置に表示されず、floatした要素と重なって見えることがあります。
ファイル名： lesson34_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>floatで起こる重なりの例</title>
<style>
.sample-box {
width: 150px;
height: 80px;
border: 4px solid #e57373;
font-size: 1em;
line-height: 80px;
text-align: center;
margin-right: 8px;
margin-bottom: 10px;
}
.box-a {
background-color: #fffde7;
float: left;
}
.box-b {
background-color: #e1f5fe;
float: left;
}
.box-c {
background-color: #d1c4e9;
color: #5e35b1;
}
</style>
</head>
<body>
<div class="sample-box box-a">ボックスA</div>
<div class="sample-box box-b">ボックスB</div>
<div class="sample-box box-c">ボックスC</div>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、ボックスAとボックスBはfloat: left;によって左から横に並びます。一方、ボックスCはfloatを指定していないため、通常の文書の流れで配置されます。
しかし、前にあるボックスAとボックスBがfloatしているため、ボックスCの位置が意図しない場所に入り込んだように見えることがあります。背景や枠線がfloat要素の下に回り込んだように見え、「ボックスCが消えた」「重なって表示された」と感じる原因になります。
問題が起こる理由を整理する
この問題は、float要素と通常のブロック要素の扱われ方が違うために起こります。
floatを指定されたボックスAとボックスBは、左側に寄せられ、後続の内容がその横へ回り込める状態になります。ところが、ボックスCはfloatしていない通常のブロック要素なので、float要素との関係によって見た目が複雑になります。
特に、ボックスCの背景や枠線の領域がfloat要素の下へ入り込んでいるように見えると、重なりや消失のように感じられます。
| 原因 | 内容 |
|---|---|
| float要素が通常フローから外れたように扱われる | 後続要素の配置に影響が出る |
| 後続要素にclearがない | floatの横や下に回り込んでしまう |
| 通常のブロック要素とfloat要素が混在する | 背景や枠線が重なって見えることがある |
floatを使うときは、「横に並んだら終わり」ではなく、「その後の要素をどこから表示するか」まで指定する必要があります。
clearでfloatの影響を解除する
floatによる回り込みを止めたいときに使うのがclearです。clearを指定すると、指定した方向のfloat要素の横には入らず、その下から表示されるようになります。
clearには、次のような値があります。
| 値 | 意味 |
|---|---|
| left | float: left;の回り込みを解除する |
| right | float: right;の回り込みを解除する |
| both | 左右両方のfloatの回り込みを解除する |
| none | 回り込みを解除しない |
横並びレイアウトでは、float: left;を使うことが多いですが、実務では左右どちらの影響も受けないようにclear: both;を使う場面がよくあります。
clear: both;clear: both;を指定すると、その要素はfloatした要素の横に入り込まず、下の行から表示されます。
図2：clearを使うとfloatの下から表示できる
この図から分かること
clearを使うと、floatによる回り込みを解除できます。clear: both;を指定した要素は、左右どちらのfloat要素の横にも入り込まず、その下から表示されます。floatのあとに通常の要素を配置したいときは、clearを使うことでレイアウトの崩れを防ぎやすくなります。
clearで解決するサンプル
次のサンプルでは、ボックスCにclear: both;を指定します。これにより、ボックスCはボックスAとボックスBの横に入り込まず、下に表示されます。
ファイル名： lesson34_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clearでfloatを解除する例</title>
<style>
.sample-box {
width: 150px;
height: 80px;
border: 4px solid #e57373;
font-size: 1em;
line-height: 80px;
text-align: center;
margin-right: 8px;
margin-bottom: 10px;
}
.box-a {
background-color: #fffde7;
float: left;
}
.box-b {
background-color: #e1f5fe;
float: left;
}
.box-c {
background-color: #d1c4e9;
color: #5e35b1;
clear: both;
}
</style>
</head>
<body>
<div class="sample-box box-a">ボックスA</div>
<div class="sample-box box-b">ボックスB</div>
<div class="sample-box box-c">ボックスC</div>
</body>
</html>ブラウザの表示例
ボックスAとボックスBは、float: left;によって横並びになります。ボックスCにはclear: both;が指定されているため、ボックスAとボックスBの下から表示されます。
これにより、ボックスCがfloat要素と重なって見える問題を防げます。floatの後に通常の要素を続けたい場合は、このようにclearを指定して、回り込みを解除することが大切です。
clearを使うときの考え方
clearは、floatの影響を受けたくない要素に指定します。つまり、「この要素はfloatの横ではなく、下から始めたい」という場所に書きます。
たとえば、横並びのボックスのあとに説明文や次のセクションを置きたい場合、その説明文やセクションにclear: both;を指定すると、floatの影響を避けられます。
.next-section {
clear: both;
}ただし、floatした要素が複数あり、それらを親要素の中にきれいに収めたい場合は、clearを後続要素に直接指定するだけでは不十分なことがあります。そのような場合に役立つのがclearfixです。
clearfixはfloatした要素を親要素に認識させるための定番対策
floatを使うと、もうひとつ大きな問題が起こることがあります。それは、親要素がfloatした子要素の高さをうまく含めないように見えることです。
たとえば、親の<div>の中にfloatしたボックスを2つ入れた場合、親要素に枠線や背景色を指定していても、子要素を包み込んでいないように見えることがあります。
これは、floatした子要素が通常の高さ計算から外れたように扱われるためです。この問題を解決するためによく使われるのがclearfixです。
clearfixでは、親要素の最後に見えない疑似要素を追加し、その疑似要素にclear: both;を指定します。
.clearfix::after {
content: "";
display: block;
clear: both;
}この指定により、親要素の末尾でfloatを解除でき、親要素がfloatした子要素を含んでいるように表示されます。
clearfixを使ったサンプル
次のサンプルでは、wrapperの中にfloatしたボックスAとボックスBを入れています。wrapperにclearfixを付けることで、floatした子要素をきちんと囲むようにします。
ファイル名： lesson34_3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clearfixでfloatを解除する例</title>
<style>
.wrapper {
border: 2px dashed #ff9800;
padding: 10px;
margin-bottom: 12px;
}
.float-item {
float: left;
width: 120px;
height: 70px;
background-color: #ffecb3;
border: 2px solid #ffa726;
margin-right: 10px;
text-align: center;
line-height: 70px;
font-size: 1em;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.next-box {
border: 2px solid #00897b;
background-color: #e0f2f1;
height: 70px;
line-height: 70px;
text-align: center;
color: #00897b;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<div class="float-item">A</div>
<div class="float-item">B</div>
</div>
<div class="next-box">float解除後のボックス</div>
</body>
</html>ブラウザの表示例
ボックスAとボックスBは、float: left;によって横並びになります。親要素のwrapperにはclearfixが付いているため、wrapperの枠線がfloatした子要素を囲むように表示されます。
その下のnext-boxは、wrapperのあとに通常通り表示されます。floatした要素の影響を受けて横に入り込むこともなく、きれいに下へ配置されます。
clearfixの仕組みを分解して理解する
clearfixのCSSは、少し難しく見えるかもしれません。1つずつ意味を見ていきましょう。
| CSS | 役割 |
|---|---|
| .clearfix::after | clearfixが付いた要素の最後に疑似要素を作る |
| content: ""; | 空の内容を生成する |
| display: block; | 生成した疑似要素をブロック要素として扱う |
| clear: both; | 左右両方のfloatを解除する |
clearfixは、HTMLに空の<div>を追加せずに、CSSだけでfloat解除用の要素を作るような考え方です。
古い方法では、floatした要素の後ろに次のような空要素を入れることもありました。
<div style="clear: both;"></div>ただし、この方法はHTMLに見た目調整のための要素が増えてしまいます。clearfixを使うと、HTMLを比較的きれいに保ちながら、CSSでfloatを解除できます。
図3：clearfixは親要素の最後でfloatを解除する
この図から分かること
floatした子要素だけが親要素の中にあると、親要素が高さを持っていないように見えることがあります。clearfixを使うと、親要素の最後に見えない解除用の要素を作り、clear: both;でfloatを終わらせられます。これにより、親要素がfloatした子要素を包み込むように表示されます。
clearとclearfixの使い分け
clearとclearfixは、どちらもfloatの問題を解決するために使いますが、使う場面が少し違います。
| 方法 | 向いている場面 |
|---|---|
| clear | floatの後に続く要素を下から表示したいとき |
| clearfix | floatした子要素を親要素に含めたいとき |
| clear: both; | 左右どちらのfloatも解除したいとき |
| .clearfix::after | 親要素の最後でfloatを解除したいとき |
たとえば、横並びのボックスの次に別の要素を下から表示したいだけなら、その次の要素にclear: both;を指定する方法が分かりやすいです。
一方で、親要素の中にfloatした子要素を入れ、その親要素の背景色や枠線で全体を囲みたい場合は、親要素にclearfixを付ける方法が向いています。
floatの問題が起きたときの確認ポイント
floatを使ったレイアウトで表示が崩れたときは、次の点を順番に確認すると原因を見つけやすくなります。
| 確認すること | 見るポイント |
|---|---|
| floatが指定されている要素 | どの要素がfloatしているか |
| 後続要素の位置 | floatの横に回り込んでいないか |
| clearの有無 | 回り込みを解除したい場所にclearがあるか |
| 親要素の高さ | floatした子要素を親が囲めているか |
| clearfixの有無 | 親要素にclearfixが付いているか |
| 横幅の合計 | float要素のwidthやmarginが親幅を超えていないか |
特に、横並びにならない場合は、floatだけでなく、widthやmarginの合計も確認しましょう。ボックスの横幅と余白の合計が親要素の幅を超えると、次の行に落ちることがあります。
floatと現代のレイアウト手法
現在のWeb制作では、横並びレイアウトを作るときにflexboxやgridを使うことが多くなっています。flexboxは横並びや中央揃えがしやすく、gridは行と列を使った大きなレイアウトに向いています。
一方で、floatの知識が不要になったわけではありません。既存のWebサイトや古い教材、試験問題などでは、floatが今でも登場します。また、floatの仕組みを理解しておくと、古いコードを修正するときに役立ちます。
| レイアウト方法 | 特徴 |
|---|---|
| float | 回り込みを作る。古い横並びレイアウトでも使われる |
| flexbox | 横並び、縦並び、中央揃えを扱いやすい |
| grid | 行と列を使ったレイアウトを作りやすい |
新しくレイアウトを作る場合はflexboxやgridを選ぶことが多いですが、floatの問題点と対策を知っておくと、CSSの理解が深まります。
floatの問題点に関するタグとCSSプロパティ
今回出てきたタグやCSSを整理しておきます。
| タグ・CSS | 説明 |
|---|---|
| <div> | 汎用的なブロック要素。グループ化やレイアウト確認によく使う |
| class | 複数の要素にCSSを適用するための属性 |
| float | 要素を左または右に寄せ、回り込みを作る |
| clear | floatの回り込みを解除する |
| .clearfix::after | 疑似要素を使って親要素の最後でfloatを解除する |
| content | 疑似要素の内容を生成する |
| display | 要素の表示形式を指定する |
| margin | 要素同士の外側余白を指定する |
| border | 要素に枠線を付ける |
| background-color | 背景色を指定する |
| width | 要素の横幅を指定する |
| height | 要素の高さを指定する |
floatを使うときは、float、clear、clearfixをセットで理解することが大切です。floatで横並びを作り、clearで後続要素への影響を止め、clearfixで親要素の高さ問題を防ぐ、という流れで考えると分かりやすくなります。
floatを安全に使うための考え方
floatは、要素を横に並べたり、文章を画像の横に回り込ませたりできる便利なCSSです。しかし、floatを指定した要素は通常の文書の流れとは違う動きをするため、何も対策しないと、後続要素の回り込み、要素の重なり、親要素の高さ不足といった問題が起こりやすくなります。
横並びの後に通常の表示へ戻したい場合は、clear: both;を使います。floatした子要素を親要素の中にきれいに収めたい場合は、clearfixを使います。この2つを理解しておくと、floatによるレイアウト崩れに対応しやすくなります。
また、新しく複雑なレイアウトを作る場合は、flexboxやgridを使ったほうがシンプルに書けることも多いです。それでも、floatの仕組みを学ぶことには大きな意味があります。CSSがどのように要素を配置し、どのように回り込みを処理しているのかを知ることで、レイアウトの理解がより深まります。
floatは少しクセのあるCSSですが、問題点と対策をセットで覚えれば怖くありません。表示が崩れたときは、どの要素がfloatしているのか、どこでclearすべきか、親要素にclearfixが必要かを順番に確認していきましょう。