CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説

floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。

サイトのキャプチャ

How Floating Works

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

floatのルール

floatプロパティには、4つの値があります。

.foo {
  float: left | right | inherit | none
}

この4つの値はそれぞれ、要素を親要素の中でどのようにフロートさせるか指定します。

float: left;
指定した要素を左にフロートさせ、続く要素は右に回り込みます。
float: right;
指定した要素を右にフロートさせ、続く要素は左に回り込みます。
float: inherit;
親要素のフロートの値を継承。
float: none;
初期値、フロートの指定はなし。

1. フロート要素を親要素から見るとどうなるか

フロートさせられた要素というのは、その親要素に対して存在していないということです。言い換えると、親要素の中の子要素をフロートさせると、親要素の中身は空の状態になります。
このことは、親要素の中の子要素を絶対値で配置した時に似ています。

.parent {
  position: relative;
  padding: 10px;
}
.child {
  float: left 
}
親要素の中身は空の状態

子要素をフロートすると、親要素の中身は空になる

2. 左や右にフロートさせる

値に「left/right」を指定すると、要素を左や右にフロートさせ、その親要素内で可能な限り左や右に配置されます。これはフロートさせられた要素が期待通りになる最適なポジションです。
この「可能な限り」というのがポイントになります。

3. フロート要素が押し下げられてしまう原因

フロートさせられた要素は、親要素のできるだけ上に配置されますが、前に定義された兄弟要素がある時は押し下げられてしまいます。もし前に定義された要素がインラインやブロック要素であるなら、それは問題ではありません。

このことは例えば、フロートさせる要素をパラグラフの前か後に定義することで、異なる結果になることを意味します。

<div class="container">
  <div>フロート</div>
  <p>パラグラフ</p>
</div>
兄弟要素の前に配置

パラグラフの「前に」フロート要素を定義

パラグラフの「後に」フロート要素を定義してみます。

<div class="container">
  <p>パラグラフ</p>
  <div>フロート</div>
</div>
兄弟要素の後に配置

パラグラフの「後に」フロート要素を定義

4. フロート要素の配置の順番

複数の要素をフロートさせた場合、前に宣言された要素がより望ましいポジションを与えられます。2番目のルールで説明した通り、最も望ましいポジションはマークアップで要素を最初に定義することです。

3つの要素に「float: right;」を適用すると、最初に定義された要素が最も望ましいポジションで配置され、最後の要素は一番離れて配置されます。

<div class="container">			
  <div class="right">1</div>
  <div class="right">2</div>
  <div class="right">3</div>
  <p>パラグラフ</p>
</div>
フロート要素の配置の順番

最初に定義された要素が一番右に配置される

5. フロート要素の配置の優先順位

右(左)の同方向にフロートさせられた要素が複数ある場合、親要素に対してより右(左)に近く、より上に配置されます。

横幅が十分にあれば並んで配置されますが、横幅が足りない場合は下に移動します。

フロート要素の配置の優先順位

3番目の要素は幅がないため、1, 2番目の下に配置される

6. フロート要素で親要素を広げない

左にフロートさせられた要素は、その親要素の左側を広げることはできません。

左に空きがない場合でも、左にフロートさせられた要素は、その親要素の右側を広げるべきではありません。

親要素を拡張しない

左は拡張することができません。
右は拡張すべきではありません。

フロートのクリア

clearプロパティはフロートを解除するもので、floatプロパティと組み合わせて利用します。値は3つあります。

.foo {
  clear: left | right | both 
}

「clear: left;」を要素に指定すると、それに続く要素の左のフロートを解除します。「clear: both;」を指定すると、それに続く要素のあらゆるフロートを解除します。

フロートの解除

パラグラフに「clear: left;」を指定

もしクリアが左か右のどちらかだけ指定すると、他の方向のフロートは影響を受けません。

<div class="container">		
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>

  <div class="right">1</div>
  <div class="right">2</div>
  <div class="right">3</div>

  <p class="clear-left">パラグラフ</p>
</div>
フロートの解除

フロートがクリアされるのは、左だけ

clearfix

フロートを解除する適切な方法に関して、多くの混乱が以前はありました、特に旧式のブラウザで。この問題を解決するのが「clearfix」で、下記のスタイルシートはフロート要素をもつ親要素に定義することで、フロートを適切に解除します。

.cf::after {
  content:"";
  display:table;
  clear:both;
}

なぜ疑似要素を使うのが効果的なのかは、疑似要素についての記事を参考にしてください。

サイトのキャプチャ

How Floating Works

top of page

©2017 coliss