float：left; 対表示：インライン; vs表示：インラインブロック; vs表示：テーブルセル;

私の質問

1. これらの方法のいずれかが、プロのWebデザイナーに好まれていますか？

2. これらの方法のいずれかは、ウェブサイトを描画するときにウェブブラウザによって優先されますか？

3. これはすべて個人的な好みですか？

4. 他に見逃しているテクニックはありますか？

注：上記の質問は、複数列レイアウトの設計に関するものです

float：left;

http://jsfiddle.net/CDe6a/

これは、列のレイアウトを作成するときにいつも使用する方法で、問題なく動作するようです。ただし、親はそれ自体で崩壊するので、clear:both;後で覚えておく必要があります。私が見つけたもう1つの欠点は、テキストを垂直に配置できないことです。

表示：インライン;

これは、親の折りたたみの問題を修正するようですが、空白が追加されます。

http://jsfiddle.net/CDe6a/1/

HTMLから空白を削除することがこの問題を解決する最も簡単な方法のようですが、HTMLに本当にうるさい場合は望ましくありません。

http://jsfiddle.net/CDe6a/2/

表示：インラインブロック;

のように動作するようdisplay:inline;です。

http://jsfiddle.net/CDe6a/3/

表示：テーブルセル;

http://jsfiddle.net/CDe6a/4/

完璧に動作します。

私の考え：

レイアウトを壊す特定の例外のように、たくさんのものを見逃していると私は確信していますが、display:table-cell;最もうまく機能してfloat:left;いるようですclear:both;。私はこれについて多くの記事やブログをウェブで読んだことがあるが、どれも私が私のウェブサイトをレイアウトするときに何を使うべきかについて明確な答えを与えてくれない。

あなたが尋ねたオプションのうち：

• float:left;
  フロートをクリアするために追加のマークアップが必要なため、フロートは嫌いです。私に関する限り、floatCSS仕様ではコンセプト全体の設計が不十分でした。でも今は何もできません。しかし重要なことは、それが機能し、すべてのブラウザー（IE6 / 7を含む）で機能することです。したがって、必要に応じて使用してください。

:afterセレクターを使用してフロートをクリアする場合、クリアするための追加のマークアップは必要ない場合がありますが、IE6またはIE7をサポートする場合、これはオプションではありません。

• display:inline;
  これは、IE6 / 7を除いて、レイアウトには使用しないでください。IE6/ 7 display:inline; zoom:1は、の壊れたサポートのフォールバックハックですinline-block。

• display:inline-block;
  これは私のお気に入りのオプションです。一部の要素をサポートするIE6 / 7には注意が必要ですが、すべてのブラウザーで一貫して適切に機能します。しかし、これを回避するためのハッキーなソリューションについては、上記を参照してください。

もう1つの大きな注意点inline-blockは、インラインアスペクトのため、要素間の空白はテキストの単語間の空白と同じように扱われるため、要素間にギャップが生じる可能性があるということです。これには回避策がありますが、どれも理想的ではありません。（最善の方法は、要素間にスペースを入れないことです）

• display:table-cell;
  もう1つは、ブラウザーの互換性に問題があることです。古いIEはこれではまったく機能しません。しかし、他のブラウザの場合でも、and table-cellとしてスタイル設定された要素の内部にあるコンテキストで使用するように設計されていることは注目に値します。単独で使用することは意図された方法ではないため、ブラウザによって異なる扱いを受ける場合があります。tabletable-rowtable-cell

あなたが見逃したかもしれない他のテクニック？はい。

• これは複数列レイアウト用であると言うので、知っておきたいCSS列機能があります。ただし、これは最もよくサポートされている機能ではないため（IE9でもIEでサポートされておらず、他のすべてのブラウザーで必要なベンダープレフィックス）、それを使用したくない場合があります。しかし、それは別のオプションであり、あなたは尋ねました。

• CSS FlexBox機能もあります。これは、ボックス間でテキストが流れるようにすることを目的としています。これは、いくつかの複雑なレイアウトを可能にするエキサイティングな機能ですが、これはまだ非常に開発中です-http://html5please.com/#flexboxを参照してください

お役に立てば幸いです。

私は通常、折りたたみ親の問題を解決するために使用float: left;および追加overflow: auto;します（これが機能する理由については、overflow: auto明示的な高さを指定しない場合、スクロールバーを追加する代わりに親を展開し、overflow: hidden同様に機能します）。私が持っていた垂直方向の配置の必要性のほとんどは、メニューバーの1行のテキストに対するもので、line-heightプロパティを使用して解決できます。本当にブロック要素を垂直方向に配置する必要がある場合は、親と垂直方向に配置されたアイテムに明示的な高さを設定し、絶対位置、上位50％、負のマージンを配置します。

私が使用しない理由display: table-cellは、サイトの幅で処理できるよりも多くのアイテムがある場合にオーバーフローする方法です。table-cellはユーザーに水平スクロールを強制しますが、floatはオーバーフローメニューをラップし、水平スクロールを必要とせずに引き続き使用できるようにします。

float：leftとoverflow：autoの最も優れた点は、IE6に戻るまでハックせずに動作することです。

私はそれがあなたがそれを必要とするものに依存すると思います：

1. 3列のレイアウトを取得するためだけに必要な場合は、を使用することをお勧めしますfloat。

2. メニューに必要な場合は、を使用できますinline-block。空白の問題については、Chris Coyierがここhttp://css-tricks.com/fighting-the-space-between-inline-block-elements/で説明しているように、いくつかのトリックを使用できます。

3. 幅が指定されたボックス内で均等に広がる必要がある複数の選択肢のオプションを作成する必要がある場合は、私が好みdisplay: tableます。これは一部のブラウザーでは正しく機能しないため、ブラウザーのサポートによって異なります。

最後に、最善の方法はを使用することflexboxです。この仕様は何度か変更されたため、まだ安定していません。しかし、それが確定したら、これが私が考える最良の方法になるでしょう。

floatも便利ですが、インラインブロックを好みます。テーブルセルが古いIEで正しくレンダリングされません（インラインブロックもレンダリングされませんがzoom: 1; *display: inline、私が頻繁に使用するハックがあります）。親よりも高さが低い子がある場合、フロートはそれらを上に持ってきますが、インラインブロックは時々台無しになります。

もちろん、IEでない限り、ブラウザはすべてを正しく解釈します。たとえば、テーブルセルの概念など、IEで問題が発生しないことを常に確認する必要があります。

すべての現実において、はい、それは個人的な好みに要約されます。

空白を取り除くために使用できるテクニックの1つfont-sizeは、親に0を設定し、それからfont-size子に返却することですが、それは面倒で大雑把です。

参考までに、Spudleyの回答に追加するためにposition: absolute、列幅がわかっている場合は、マージンを使用することもできます。

私にとって、メソッドを選択する際の主な問題は、列全体の高さ（同じ高さ）を埋めるために列が必要かどうかであり、table-cellが最も簡単な方法です（古いブラウザーをあまり気にしない場合）。

私が好むinline-blockが、floatインラインブロックは、他の多くのケースではうまく機能している間、フロートが少ない行を書いて、より良い作業、我々は1が右へ左1に固執すべき要素を持っている特別な時に、まだHTML elemenetsを一緒に入れて便利な方法です。