CSSFloatを理解する

この記事では、CSSフロートポジショニングの使用方法と、CSSを使用する際の落とし穴について説明します。

CSSの初心者は通常、floatポジショニングがどのように機能するかを理解するのに苦労します。 これはおそらく、人々がそれを使いすぎる傾向があるか、それを使いすぎるCSSフレームワークを何度も使用しているためです（ Bootstrap v2 👀を見てください）。

floatを頻繁に使用すると、ページレイアウトが予測不能になり、壊れやすくなる可能性があります。 floatの使い方をたくさんの人に教えた後、floatを簡単に理解できるように3つのルール/ガイドラインを思いつきました。

3つのルール

• ルール＃1意図された目的のためにfloatを使用する
• ルール＃2 float要素を含む親は折りたたまれます
• ルール＃3 clearをfloatと組み合わせて使用します

ルール＃1：意図された目的のためにフロートを使用する

Webデザインは、印刷デザインの分野に深く影響を受けています。floatは、印刷デザイナーが視覚要素を横に「引っ張って」、他のコンテンツを自由に流せるようにする必要がある場合の、これらのルーツへのオマージュです。

今日、これはWebサイトのデザインパターンのままであり、信じられないかもしれませんが、floatが行うことを達成するためのCSS回避策はありません。

<p>
  <img class="bitey-img" src="apex-predator.jpeg"/> The alligator is a crocodilian in the genus Alligator of the family Alligatoridae. The two living species are...
</p>

.bitey-img {
  float: right;
}

これは、float: right;を使用するだけで実現されました。 ブラウザウィンドウのサイズを変更でき、テキストは画像の周りを自然に流れます。 Flexbox、position: absolute、またはその他の回避策ではこれを実現できません。 これは、floatだけが実行できる一見強力な機能です。

float: left;を使用して、反対側に何かを固定することもできます。

以上です！

これらは実際にfloatの唯一の実用的な使用法です。 これは、HTML要素を横に固定するものが必要であり、コンテンツがその周囲の空きスペースを埋める場合に使用されます。 これらの基準のいずれかが欠落している場合は、別のアプローチ（ CSS Flexbox など）を使用する方が適しています。

---

事例：古いバージョンの Bootstrap v2 は、コードベースのあらゆる場所でfloatルールを使用していました。 たとえば、.row-fluid span要素は次のとおりです。

必然的に、人々はBootstrapテーマをカスタマイズしてから、レイアウトが壊れているのを目にし始めます。 まったくの混乱でした！ ありがたいことに、Bootstrapチームは、新しいリリースからfloatルールを大幅に削除しました。

ルール＃2：フローティング要素を含む親は崩壊します

次の図では、<div>には、float: left;が適用された他の3つの<div>要素が含まれています。 親要素の計算された高さは0pxです。これは、浮動要素を含むように拡張されないためです。

CSSを初めて使用する場合、これはかなり奇妙です。 含まれている<div>は、フローティングされていない要素に対してのみ展開されます。

ルール3：フロートと組み合わせてクリアを使用する

一部のCSSルールは、font-familyやfont-sizeなどの他のCSSルールを補完します。 片方に手を伸ばすと、通常はもう片方を使用します。 さやの中の2つのエンドウ豆のように！ floatとclearについても同じことが言えます。

一般的に、floatを使用する場合は、clearの使用を検討する必要があります。 または、レイアウトが壊れることがあります。

2番目の見出しは画像を折り返すべきではありません。 「ソースの表示」ウィンドウに切り替えて、clear: noneをclear: bothに編集してみてください。 これにより問題が修正され、見出しが独自の行に配置されます。

clearを使用すると、フロートされた要素が予測可能になり、より楽しく使用できるようになります。 clearの値は、none（デフォルト）、right、left、both、inline-start、またはinline-end。

結論

floatプロパティは、CSSで非常に特別な役割を果たします。 これは、他のCSSプロパティでは実行できないことを実行します。これらの3つのルールに従うと、floatをデザインで効果的に活用できるようになります。