【CSS】clear: bothとは？float解除やclearfixとの違い

CSSで古いレイアウトや画像回り込みのコードを読んでいると、clear: both;という指定を見かけることがあります。「clearって何を消しているの？」「bothは何の両方？」「clearfixとは違うの？」と疑問に感じる方も多いはずです。clearは、floatで回り込んだ要素の影響を解除し、次の要素を下に回すためのCSSです。clear: bothは、左float・右floatの両方の回り込みを解除し、要素をfloatの下に配置するための指定です。

この記事では、clearの意味、left・right・bothの違い、clearfixやdisplay: flow-root;との使い分けまで解説します。

CSSのclear: bothとは？

clear: both;とは、floatで左または右に寄せられた要素の回り込みを解除し、その下から次の要素を表示させるCSSです。

.next-section {
  clear: both;
}

この指定を入れると、.next-sectionは前にある左float・右floatの横へ回り込まず、float要素の下に配置されます。

clearは「floatの回り込みを止める」指定

clearは、何かを削除するCSSではありません。floatの影響を受けて横に回り込むのを止める指定です。floatされた要素の横に続いてしまう次の要素を、下に押し下げるために使います。

floatで回り込みが起きる基本

clearを理解するには、まずfloatの動きを知る必要があります。

<img class="photo" src="sample.jpg" alt="記事の画像">
<p>この文章は画像の横に回り込みます。floatを使うと、画像の周囲にテキストが流れます。</p>
<section class="next-section">次のセクション</section>

.photo {
  float: left;
  width: 200px;
  margin: 0 16px 16px 0;
}

このままだと、次のセクションまで画像の横に回り込む場合があります。

clear: bothで次の要素を下に回す

次の要素をfloatの下から始めたい場合は、clear: both; を指定します。

.next-section {
  clear: both;
}

clear: both; を指定すると、左右どちらのfloatによる回り込みも解除されます。そのため、後続の要素はfloat要素の横に回り込まず、必ず下から表示されます。

clear: bothを指定した場合

• 左右どちらのfloatも解除する
• 後続要素がfloat要素の横に回り込まなくなる
• 次のセクションがfloat要素の下から開始される

clearなしの場合

• floatの回り込みが残る
• 後続要素がfloat要素の横に入り込む
• レイアウトによっては次のセクションが上へ持ち上がって見える

floatを使った後に次の要素が意図せず横へ入り込む場合は、clear の指定漏れを疑いましょう。特にレイアウト崩れやセクションの重なりが発生している場合は、floatを解除する必要がないか確認することが大切です。

clear: left / right / bothの違い

clearには、left、right、bothなどの値があります。

値	意味	使う場面
clear: left;	左floatの回り込みを解除	左に寄せた画像の下から始めたい
clear: right;	右floatの回り込みを解除	右に寄せた画像の下から始めたい
clear: both;	左と右の両方を解除	左右どちらのfloatでも確実に下から始めたい
clear: none;	解除しない	初期状態

実務では、左右どちらのfloatが来ても崩れにくいclear: both;がよく使われます。

迷ったら、float解除にはclear: both;を使うと安全です。

clear: bothを使う具体例

ここでは、画像の回り込みを解除して、次の見出しを下から表示する例を見てみましょう。

<div class="article-block">
  <img class="article-photo" src="sample.jpg" alt="CSS学習の画面">
  <p>画像の横に本文が回り込みます。本文が短い場合、次の見出しまで回り込むことがあります。</p>
</div>

<h2 class="clear-heading">次の見出し</h2>

.article-photo {
  float: left;
  width: 240px;
  margin: 0 20px 16px 0;
}

.clear-heading {
  clear: both;
}

このようにすると、.clear-headingはfloat画像の横に入り込まず、画像の下から表示されます。

clearfixとは？親要素の高さを復活させる方法

clear: both;は、次の要素をfloatの下へ移動するための指定です。一方で、clearfixは、floatした子要素を親要素の高さに含めるためによく使われたテクニックです。

昔ながらのclearfix

古いCSSでは、次のようなclearfixがよく使われました。

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

親要素にclearfixクラスを付けることで、floatした子要素の後ろに見えないブロックを作り、そこでclear: both;を効かせます。

現在はdisplay: flow-rootも選択肢

現在は、親要素にdisplay: flow-root;を指定する方法もあります。

.media-box {
  display: flow-root;
}

flow-rootは新しいブロック整形コンテキストを作り、floatを親要素の中に閉じ込めるような働きをします。古いコードではclearfix、新しく書くならdisplay: flow-root;も検討できます。

clearfixとclear: bothは似ていますが、目的が少し違います。次の要素を下げたいのか、親の高さを保ちたいのかを分けて考えましょう。

clear: bothが効かないときの原因

clearを指定しても効かない場合は、次のポイントを確認しましょう。

原因1：floatしている要素より前にclearを書いている

clearは、基本的に前にあるfloatの影響を解除する指定です。float要素より前に書いても期待通りには働きません。

原因2：clearを指定する要素を間違えている

floatの下から始めたい要素にclearを指定します。floatしている要素自身ではなく、回り込みを止めたい次の要素に指定するのが基本です。

.next {
  clear: both;
}

原因3：float以外のレイアウト崩れをclearで直そうとしている

clearはfloatの回り込みを解除するためのCSSです。FlexboxやGrid、positionの重なり、z-indexの問題には効きません。

FlexboxやGridで作ったレイアウトの崩れにclear: bothを入れても、基本的には解決しません。まずfloatが使われているか確認しましょう。

なぜFlexboxやGridではclear: bothが不要になるのか

現在のWeb制作では、横並びレイアウトにfloatではなく、FlexboxやCSS Gridを使うことが一般的です。理由はシンプルで、FlexboxやGridは「横並びや列の配置を作るために設計されたCSS」だからです。floatのように要素を浮かせて、あとからclearで回り込みを止める必要がありません。

floatで横並びを作る古い書き方

<div class="card-list">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>

.card {
  float: left;
  width: 33.333%;
}

.card-list::after {
  content: "";
  display: block;
  clear: both;
}

この書き方では、カードを横に並べるためにfloatを使い、親要素の高さを保つためにclearfixを追加しています。

Flexboxで書く現代的な方法

.card-list {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
}

Flexboxでは、親要素にdisplay: flex;を指定するだけで子要素を横並びにできます。子要素を浮かせていないため、clear: both;やclearfixは不要です。

Gridで2カラム・3カラムを作る方法

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Gridは、カード一覧や2カラムレイアウトのように、列を明確に分けたい場面に向いています。FlexboxやGridでは要素をfloatさせないため、回り込み解除のためのclear: both;は基本的に不要です。

新しく横並びレイアウトを作る場合は、clearで直す前に、そもそもfloatではなくFlexboxやGridで作れないかを検討しましょう。

Flexbox時代でもclear: bothを覚えるべき理由

新しくレイアウトを作る場合、floatよりFlexboxやGridを使うことが多いです。それでもclear: both;を知っておく価値はあります。

• 古いWordPressテーマでfloatが残っていることがある
• 過去のCSSテンプレートを読むときに必要になる
• 画像のテキスト回り込みではfloatが今でも使われることがある
• clearfixの意味を理解できるようになる

新規制作ではFlexboxやGrid、古いCSSの保守ではfloatとclearの知識、というように使い分けましょう。

実務コラム：WordPressの既存テーマでは今でも出会う

WordPressの古いテーマや、長く運用されている企業サイトでは、今でもfloat、clear: both;、clearfixが残っていることがあります。

たとえば、サイドバー付きのレイアウト、画像回り込み、古い投稿テンプレート、LPの横並びパーツなどです。こうした既存サイトでは、いきなりFlexboxへ置き換えると、他のページやスマホ表示まで崩れる可能性があります。

既存サイトの保守では、「なぜclear: bothが入っているのか」を理解してから修正することが大切です。

古いCSSを修正するときは、該当ページだけでなく、同じclassが使われている他ページも確認しましょう。

clear: bothの実務チェックリスト

確認項目	見るポイント	対策
floatの有無	前の要素にfloatがあるか	floatがなければclearは不要
指定位置	次の要素にclearを書いているか	回り込みを止めたい要素へ指定する
左右の違い	left/rightのどちらを解除したいか	迷ったらbothを使う
親の高さ	親の背景や枠線が潰れていないか	clearfixまたはflow-rootを使う

公式ドキュメントも確認する

clearやfloatの仕様を正確に確認したい場合は、MDN Web Docsの公式情報も参考になります。

• MDN Web Docs clear
• MDN Web Docs float
• MDN Web Docs Block formatting context

まとめ：clear: bothはfloatの回り込みを止めるための指定

この記事では、CSSのclear: both;について解説しました。clear: bothは、左float・右floatの両方の回り込みを解除し、次の要素をfloatの下から表示するためのCSSです。

新しいレイアウトではFlexboxやGridを使うことが多いですが、古いCSSや画像の回り込みではfloatとclearが登場します。意味を理解しておくと、既存サイトの修正や表示崩れの原因特定がしやすくなります。