on:2015年8月28日sponsorsfloatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。Works下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。フロート要素で親要素を広げないフロートのクリアclearfixfloatのルールfloatプロパティには、4つの値があります。none}この4つの値はそれぞれ、要素を親要素の中でどのようにフロートさせるか指定します。left;指定した要素を左にフロートさせ、続く要素は右に回り込みます。right;指定した要素を右にフロートさせ、続く要素は左に回り込みます。inherit;親要素のフロートの値を継承。none;初期値、フロートの指定はなし。フロート要素を親要素から見るとどうなるかフロートさせられた要素というのは、その親要素に対して存在していないということです。言い換えると、親要素の中の子要素をフロートさせると、親要素の中身は空の状態になります。このことは、親要素の中の子要素を絶対値で配置した時に似ています。左や右にフロートさせる値に「left/right」を指定すると、要素を左や右にフロートさせ、その親要素内で可能な限り左や右に配置されます。これはフロートさせられた要素が期待通りになる最適なポジションです。この「可能な限り」というのがポイントになります。フロート要素が押し下げられてしまう原因フロートさせられた要素は、親要素のできるだけ上に配置されますが、前に定義された兄弟要素がある時は押し下げられてしまいます。前に定義された要素がインラインやブロック要素であるなら、それは問題ではありません。このことは例えば、フロートさせる要素をパラグラフの前か後に定義することで、異なる結果になることを意味します。<p>パラグラフ</p></div>パラグラフの「前に」フロート要素を定義パラグラフの「後に」フロート要素を定義してみます。複数の要素をフロートさせた場合、前に宣言された要素がより望ましいポジションを与えられます。2番目のルールで説明した通り、最も望ましいポジションはマークアップで要素を最初に定義することです。right;」を適用すると、最初に定義された要素が最も望ましいポジションで配置され、最後の要素は一番離れて配置されます。右(左)の同方向にフロートさせられた要素が複数ある場合、親要素に対してより右(左)に近く、より上に配置されます。横幅が十分にあれば並んで配置されますが、横幅が足りない場合は下に移動します。フロート要素で親要素を広げない左にフロートさせられた要素は、その親要素の左側を広げることはできません。左に空きがない場合でも、左にフロートさせられた要素は、その親要素の右側を広げるべきではありません。左は拡張することができません。右は拡張すべきではありません。フロートのクリアclearプロパティはフロートを解除するもので、floatプロパティと組み合わせて利用します。left;」を要素に指定すると、それに続く要素の左のフロートを解除します。both;」を指定すると、それに続く要素のあらゆるフロートを解除します。left;」を指定もしクリアが左か右のどちらかだけ指定すると、他の方向のフロートは影響を受けません。class="clear-left">パラグラフ</p></div>フロートがクリアされるのは、左だけclearfixフロートを解除する適切な方法に関して、多くの混乱が以前はありました、特に旧式のブラウザで。この問題を解決するのが「clearfix」で、下記のスタイルシートはフロート要素をもつ親要素に定義することで、フロートを適切に解除します。clear:both;}なぜ疑似要素を使うのが効果的なのかは、疑似要素についての記事を参考にしてください。Posts関連記事が見つかりませんでした。