CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説
Post on:2015年8月28日
sponsors
floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- floatのルール
- 1. フロート要素を親要素から見るとどうなるか
- 2. 左や右にフロートさせる
- 3. フロート要素が押し下げられてしまう原因
- 4. フロート要素の配置の順番
- 5. フロート要素の配置の優先順位
- 6. フロート要素で親要素を広げない
- フロートのクリア
- clearfix
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;
}
なぜ疑似要素を使うのが効果的なのかは、疑似要素についての記事を参考にしてください。
sponsors
