CSSのfloatとdisplayの違い

Question

実現したいこと

CSSで以下の3つの要素を横並びに配置したいと考えています。
要素1: アイコン＋1行の文字
要素2: 改行された2行の文字列
要素3: 1行の文字

わからないこと

要素を横並びにするには、floatやdisplay（block、inline、inline-block、table-cell）があるというのはわかりましたが、floatとdisplayどちらを使うべきなのかがわからず困っています。

調べてみたところ、書き方次第でどちらも同じように作れるのはわかるのですが、それぞれどのような場面で使用すべきものなのか、またそれぞれの特徴を教えてもらいたいです。

Answer 1

個人的には、横並びにする目的でfloatやdisplay:table-cellを使わないほうがいいのではないかと思います。

横並びにするにはdisplay:flexまたはdisplay:gridで対応するのがよいかと。
display:gridの方が分かりやすいと思うのですが、ブラウザ対応にやや難があるかもしれません。



ただ、IE10-のようなレガシーブラウザに対応するには、残念ながらfloatやdisplay:table-cellを使わざるを得ないです。

Comments

[gomakichi]

回答ありがとうございます。
floatやtable-cellを使うべきでない具体的な理由はあるのでしょうか？

様々なサイトを見ても使うべき・使うべきではないというどちらの意見も出てきてしまい、悩んでしまっています…。

[Lhankor_Mhy]

「使うべきではない」ではなくて「使わないほうがいい」です。

float は「カラム落ち」に悩まされます。カラムの内部要素がはみ出したりしただけで簡単に全体のレイアウトが崩れることがあります。また、レイアウトの自由度も低いです。いろいろ苦労が多いやり方です。「使うべきではない」に一番近いのがこのやり方だと思っています。

table-cellは細かい仕様が実装依存になっている部分が多く、見るブラウザによって表現が変わることがありえます。レイアウトの自由度はそれなりですが、HTML構造に左右される度合いが高いため、CSSだけの変更でレイアウト変更に対応できないケースがあります。まあ、floatよりは楽なので「使うな」とまでは言わないですが、他によい方法があると思います。

[Lhankor_Mhy]

まあ、でも、table-cellは縦中央ぞろえとかするにはプロパティが直感的でお手軽なんだよなあ......

[gomakichi]

度々回答ありがとうございます。
「使わない方が良い」ですね。大変失礼いたしました。

ご丁寧にありがとうございます。
他の良い方法というものを調べてみたいと思います。

Answer 2

じゃあとりあえず、floatとflexboxを比較してみましょう。

###float

• flexがない時代からあって、多くのブラウザでこれを使えば横並びを実現できる。古いブラウザに対応可能。
• 本来は左右どちらかに寄せるためのもの。
• clearが面倒くさい。

###flexbox

• 主要なブラウザはほとんど対応しているものの、古いブラウザでは動かない。
• flexboxはある一方向にエレメントを整列させるためのもの。
• 簡単、めんどくさくない。
• 加えて、自由度が高い(上下幅の高さ、センタリングなど)

さて、これをみると、floatよりflexboxのほうが要素を並べるという目的のために洗練されてる感じ、しませんか？そうなのです、人類はfloatなどの古い技術を使った横並びによるトラブルに苦しみ、学び、ついにflexboxを獲得したのです！だとすれば、古いブラウザをターゲットにしない限り、flexboxという便利道具を使わないわけにはいきませんよね？

今回の場合、後方互換に配慮しなくていいなら他のどれよりもflexboxを使うべきです。

Comments

[ViiiiiN]

最後の文がいいたかっただけだったりする。

[gomakichi]

回答ありがとうございます。
今までflexboxというものは使用したことがなかったため、新しく何かできたんだなー程度にしか感じていなかったのですが、floatの苦しみからflexboxを作ったのですね・・・。

後方互換に配慮というのがわかっていないのですが、flexboxで進めてみたいと思います。ありがとうございます。

[liveasnotes]

flexboxを初めて知ったときは感動しました．

せっかくなので，Colissさんの解説記事を載せておきます
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

[gomakichi]

解説記事のURLありがとうございます。
ぜひ、参考にさせていただきたいと思います。

Answer 3

Lhankor_Mhy さんの書かれている通り、display:flex display:grid でほとんど処理できると思います。

下記のサイトで横並びの方法、実装における注意点についても詳細に紹介されています。

【よこ並びのCSS。】
http://lopan.jp/layout/

【段組みのCSS。】
https://lopan.jp/layout2/

display:flex がお勧めですが、IE11にはバグがあり、アップデートされることも無いのでその対策は必要になります。下記のサイトにいくつか紹介されています。（他のブラウザはアップデートで対応されている可能性があります）

【flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita】
https://qiita.com/hashrock/items/189db03021b0f565ae27

Comments

[gomakichi]

回答ありがとうございます。
対策面までご指摘いただきありがとうございます。こちらのURLを参考に対策も含めて実装したいと思います。ありがとうございます。