CodePen.floatの仕組みfloatの仕組みとしては、指定した要素を浮動化(浮いた状態)にさせ、右や左に配置することができます。通常であればブロックボックスは縦方向へ、インラインブロックは横方向へ配置されるように、それぞれ決まっているフローがありますが、この「浮動化」という特徴的な仕組みでは、浮動化している要素は通常のフローから外れてしまいます。floatで指定した要素はそれ以外の要素にも影響を与えてしまいます。具体的には「ブロックボックスは浮動ボックスの背面に、インラインボックスは前面に配置される」という仕組みになっています。行ボックスの間にfloatがあると、テキストが回りこんだようになります。この背面や前面という配置が、実際にどういう風に配置されるのか言葉だけではイメージしにくいため、詳しく掘り下げていきましょう。CodePen.通常のブロックボックスは幅関係なく上から下へ縦方向に配置されていきますが、このように、浮動化している要素は通常のフローから外れてしまうため、ないものとして扱われ配置されます。それ以降のブロックボックスはfloatした要素の背面に並んで配置されるようになります。CodePen.インラインブロックの場合はfloatしている要素の前面に配置されるため、通常のフローと同様に横方向へ配置されます。このままではわかりにくいので、わかりやすいようにネガティブマージンを使用して、floatした要素の前面に来ていることがわかるように調整しています。斜めからみるとこのようにイメージになります。この様にfloatを指定した要素以外の要素にも影響を与えることがわかると思います。right」の例のように、テキストが回りこむような表示は行ボックスというものが関係しています。この行ボックスはブロックボックス、インラインボックスとは別に一行ごとに生成されるボックスのことで、通常は包含するボックスの幅いっぱいに広がります。間にfloatを指定している要素がある場合は、その要素に応じて幅を調整するようになります。そのため、行ボックスがfloat部分の幅を調整することで、テキストが回りこんだようになるという仕組みになります。このような仕組みでfloatやfloat要素以外で影響を受ける要素は配置されていきます。floatを使用して画像付き一覧表示ブログやユーザーの一覧表示などでよく使われる、画像付きテキスト一覧表示がありますが(ヌーラボサイトのトップページにも使用されていますね)、このような画像とコンテンツの組み合わせもfloatを使用して、レイアウトすることが出来ます。次はそのレイアウトを例にfloatでのレイアウトで失敗しやすいポイントを見ていきましょう。最初に解説したように、左に配置する場合はleftを使用すればよいので、画像に「float:left」を指定すればうまくいきそうな印象です。一見するとこれだけで出来るお手軽な印象ですが、実はfloatは失敗しやすいポイントがいくつかあります。CodePen.floatは右や左に配置することができますが、配置後に出来た空白部分を埋めるように、その後の要素が配置されてしまいます。left」のみを指定している場合、以降の要素が画像に回り込んでしまったり、テキスト量によってレイアウトが変わってしまうため、レイアウトが崩れてしまいます。そのため、floatを解除させるための記述が必要になります。floatを解除するには、解除させたい要素にclearプロパティを指定することで解決することが出来ます。clearプロパティの一覧は以下のようになります。(初期値)また、clearプロパティの原理としては、margin-topを自動的に浮動化した要素の高さまで調整するような振る舞いをします。「floatを解除する」というよりも、「floatの影響の及ばない範囲まで調整する」というイメージの方が理解しやすいかもしれません。CodePen.最初の解説のようにfloat要素は浮動化しているため、実は通常のフローから外れるような振る舞いになります。これが原因のため、要素自体の高さはあっても、描写領域としては認識されないため、親要素からはみ出してしまうような表示になってしまいます。floatは勝手に解除されない」でclearプロパティを使用したように、親要素の内側で何かしらの要素を使ってclearを指定すればよいのですが、内容によっては都合よくclearを指定できる要素がないため、不要な要素が必要になったり、HTMLの文法的に問題が出る場合があります。他の方法として、floatさせた親要素にoverflowプロパティでvisible以外を指定すると、問題が解決する手法もありますが、この手法はoverflowを使用しているために起こってしまう別の問題などを含んでいるため、使用できる場面が限られてしまいます。そこで、この問題を解決するために確立されたのがclearfixという手法です。clearfixとは海外のデベロッパーの方が2004年ごろに公表したのが始まりとされていて、擬似要素の「:after」を利用して、htmlに不要な要素を作らずにfloatを解除させることを目的とした手法です。当時はCSSで実現できることも限られていたのでIEのバグを利用したり、NetscapeやIE7以前のブラウザも考慮した記述で実装されていました。現在では、利用率の多いとされていたブラウザやバージョンから変わっているため、内容も最適化されて短い記述で実現することが出来ます。CodePen.clearfixはfloatを指定した要素の親要素に「:after」という擬似要素を追加します。block;」と「clearプロパティ」を指定することで、「div.clear」と同じような効果を実現することが出来ます。事前にclearfix用のクラスを準備します。このクラスをfloatさせた要素の親要素に対して設定することで、floatによる問題を解決することが出来ます。SASSなどを使用しているのであればmixinをつくっておくのもやり方の1つです。clearfix;」と記述することで、mixinの内容が展開されると思います。これでfloatの失敗しやすいポイントもしっかり解決できると思います。時代とともに最適化するclearfix最新のclearfixは内容が最適化されている分、少し古いブラウザへの考慮はそれほどされていません。そのため、最新版ではIE6,7のような古いブラウザは非対応になっていますが、時代ごとに最適化されてきた経緯があるため、IE6,7に対応した記述もあります。*/また、出来て間もない初期のバージョンは、今では使用されていないブラウザへの考慮も必要だったため、記述内容は大幅に違っています。*/このあたりの記述の違いにも、その時に最適なやり方を確立しようとする歴史を感じられると思います。各記述が気になった方は、その記述について調べてみるとより深くその時のデベロッパーのブラウザへの憤り創意工夫や歴史を垣間見れると思います。他のレイアウト手法や次世代のレイアウト手法floatプロパティとclearfixについて解説してきましたが、この手法も万能ではないため、場面によって他の手法を使い分けることで横並びのレイアウトを実現することも必要になります。画像をテキストを水平に揃えたい場合。行数が可変したりする場合などは、floatでのレイアウトは向いていません。table-cell」を使用することで、横並びしつつ水平に揃えることが可能になります。CodePen.この方法はCSS側でtableタグやth,tdタグと同じような振る舞いになるように指定することで、実現出来ています。これも万能の様に見えますが、IE7以下はそのまま使用出来なかったり、marginが使えなかったりとそれなりに不便な面もあります。「flexbox」という新しい手法の登場により、CSSでは難しかったレイアウトの実現なども可能となり、注目されています。等間隔での配置や縦の中央揃えなど、以前では難しかったレイアウトも簡単な記述で実現することで可能となり、とても期待できる手法の1つとなっています。(ヌーラボの一部サービスでも使用しています)ただ、この手法も万能ではなく、IE9ではそのまま使用出来なかったり、IE10でも完全に対応出来ない部分があったりと、まだまだ環境によっては使用が難しい状態です。それぞれの手法で得意な点と不得意な点があるので、特徴を理解することで場面に応じて手法を使い分けることが必要になってきます。新しい手法が生まれたからといって、floatのようにこれまで使われてきた手法がなくなっていくということでもないため、基礎的な部分を理解することで、それぞれの特徴を理解できることでしょう。まとめ今回はfloatについての解説でしたが、いかがだったでしょうか?レイアウトが思うようにいかずに挫折、仕組みがピンとこなくて避けていたという方も多いのではないでしょうか。今回の解説でしっかりと理解してなんとなくのCSSから卒業していただけると幸いです。自分で書きたい!というエンジニアも大歓迎です。こちらからご応募ください。ヌーラボのフロントエンド・エンジニアとお話がしてみたいという方も募集していますので、ご応募お待ちしています。Reserved.EnglishEnglish。