実行できるCSSドキュメント: CSS float と clear

Q: clear は何をしますか？

clear は、指定した側にある前の float より下に要素を移します: clear: left、clear: right、clear: both。float の横に内容が回り込むのを止める方法です。

Q: clearfix とは何ですか？

親に float を包ませるためのテクニックで、昔は clear: both を指定した ::after 疑似要素を使っていました。今は親に display: flow-root を指定すれば 1 行で同じことができます。

float の役割

float は要素をコンテナの片側に寄せ、後に続く文章をその周りに回り込ませます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

float したボックスの margin があるので、文章がボックスにくっつきません。このすき間は margin で調整します。文章の側に、float に向けた margin を付けることはできません。

値

値	結果
`none` (初期値)	float しない
`left`	左端に寄せる
`right`	右端に寄せる
`inline-start`	行の始まりに寄せる。英語では左、アラビア語やヘブライ語では右
`inline-end`	行の終わりに寄せる

inline-start と inline-end は書字方向に従うので、これで作ったレイアウトは右から左のページで正しく反転します。また、float した要素は block になります。display: inline は block に変わるので、span や img でも width と height が効きます。

文章の中の画像を回り込ませる

定番の使い方は、記事の中の画像の周りに文章を流すことです。左右に 1 つずつ float させてみます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

clear: 回り込みを止める

clear は「この側にある前の float より下から始める」という意味です。次のセクションの見出しのように、float の横に並べたくない要素に使います:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

1 つ目の見出しは float の横に押し込まれます。2 つ目は float の下から始まります。clear には left、right、both、inline-start、inline-end、none を指定できます。

高さが 0 になる親と flow-root

float は通常のフローから外れるので、子要素がすべて float しているコンテナにはフローの中に何もなく、高さが 0 になります。背景と border は、float の上の細い線になってしまいます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root は新しいブロック整形コンテキストを作り、float を必ず包みます。古いコードでは、同じ結果を得るために「clearfix」を使っています:

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

overflow: hidden や auto でも float を包めますが、切り取りという副作用があります。overflow を参照してください。

float はレイアウト用ではない

flexbox と grid ができる前は、ページ全体のレイアウトを float した段で組み、あちこちで clearfix と幅の計算をしていました。その時代は終わりました。float では中央に寄せられず、段の高さをそろえられず、内容のサイズが変わると崩れます。行と列には display: flex か display: grid を使い、float は何かの周りに文章を回り込ませるために使いましょう。文章を回り込ませるのではなく画像を中央に置くなら、画像の中央寄せを見てください。

形に沿って回り込ませる

shape-outside を使うと、float の四角形ではなく、形に沿って文章を回り込ませられます。float した要素でのみ効きます:

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

よくある間違い

親の高さが 0 になる。 子要素がすべて float しています。display: flow-root を追加しましょう。
段組みやナビゲーションに float を使う。 flexbox か grid を使いましょう。
float: center があると思う。 ありません。flexbox、grid、margin: 0 auto で中央に寄せます。
float の後の内容が、回り込んでほしくないのに回り込む。 clear: both を指定するか、float と文章を flow-root のコンテナに入れます。
多言語サイトで物理的な left と right を使う。 inline-start と inline-end を使えば、右から左の言語でレイアウトが反転します。