フロート：左。 vs表示：インライン。 vs表示：インラインブロック。 vs表示：表のセル。
私の質問
これらの方法のどれかはプロのWebデザイナーによって好まれますか？
Webサイトを描画するときにこれらの方法のいずれかがWebブラウザによって優先されますか？
これはすべて個人的な好みですか？
私が欠けている他のテクニックはありますか？
注：上記の質問は複数列レイアウトの設計に関するものです
フロート：左。
これは私が列レイアウトを作成するときにいつも使う方法です、そしてそれはちょうどうまくいくようです。親は自分自身で崩壊するので、あとでclear:both;を覚えておく必要があります。私がちょうど見つけたもう一つのconはテキストを垂直に整列させることができないということでした。
表示：インライン。
これは折りたたみ親の問題を修正するようですが、空白を追加します。
Htmlから空白を削除するのがこの問題を解決する最も簡単なようですが、あなたが本当にあなたのhtmlについてうるさいのであれば望ましくありません。
表示：インラインブロック。
display:inline;とまったく同じように振る舞うようです。
表示：テーブルセル。
完璧に動作します。
私の考え：
レイアウトを壊すような例外があるように、たくさんのものが欠けていると確信していますが、display:table-cell;は最善を尽くしているようで、いつもfloat:left;をめちゃくちゃにしているのでclear:both;を置き換え始めると思います。私はウェブ上でこれについて多くの記事やブログを読んだが、それらのどれも私のウェブサイトをレイアウトするとき私が何を使うべきかについての明確な答えを私に与えない。
あなたが尋ねたオプションのうち：
float:left;
フロートをクリアするには追加のマークアップが必要なため、フロートは嫌いです。私の知る限りでは、floatの概念全体はCSSの仕様ではうまく設計されていません。私たちが今それについてできることは何もない。しかし重要なことはそれがうまくいくこと、そしてそれはすべてのブラウザ（IE6/7でさえも）でうまくいくので、あなたがそれを好きならそれを使ってください。
フロートをクリアするために:afterセレクタを使用する場合、クリアのための追加のマークアップは必要ないかもしれませんが、IE6またはIE7をサポートしたい場合、これはオプションではありません。
display:inline;
これは、display:inline; zoom:1がinline-blockのための壊れたサポートのための代替ハックであるIE6/7を除いて、レイアウトのために使われるべきではありません。display:inline-block;
これは私のお気に入りの選択です。それはいくつかの要素のためにそれをサポートするIE6/7のための警告で、すべてのブラウザにわたってうまくそして一貫して動作します。しかし、これを回避するための厄介な解決策については上記を参照してください。
inline-blockに関するもう1つの大きな注意点は、インラインの観点から、要素間の空白はテキストの単語間の空白と同じように扱われるため、要素間に空白ができることです。これには回避策がありますが、どれも理想的ではありません。 （最善の方法は、単純に要素間にスペースを入れないことです）
display:table-cell;
ブラウザの互換性に問題があるもう1つの問題。古いIEはこれではまったく動作しません。しかし、他のブラウザの場合でも、table-cellはtableおよびtable-rowとしてスタイル設定された要素の内側にあるという文脈で使用されるように設計されていることに注目する価値があります。table-cellを単独で使用することはそれを意図した方法ではないので、あなたはそれを異なって扱う異なるブラウザを経験するかもしれません。
あなたが見逃したかもしれない他のテクニック？はい。
これは複数列レイアウトのためのものであると言うので、あなたが知りたいと思うかもしれない CSS列機能 があります。ただし、最もよくサポートされている機能ではありません（IE 9でも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：leftとoverflow：autoの最大の利点は、ハッキングなしでIE6に戻って動作することです。おそらくそれ以上です。
私はそれがあなたがそれを必要とするものに依存すると言うでしょう：
あなたが3列のレイアウトを得るためだけにそれを必要とするならば、私は
floatでそれをすることを勧めます。メニューに必要な場合は、
inline-blockを使用できます。空白の問題については、Chris Coyierがここで説明しているように、いくつかのトリックを使用できます http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .幅を指定されたボックス内に均等に広げる必要がある複数選択オプションを作成する必要がある場合は、
display: tableをお勧めします。これは一部のブラウザでは正しく機能しないため、ブラウザのサポートによって異なります。
最後に、最良の方法はflexboxを使うことです。この仕様は何度か変更されているので、まだ安定していません。しかし、いったんそれが完成したら、これが私が考える最高の方法になるでしょう。
フロートも便利ですが、私はインラインブロックを好む。テーブルセルは古いIEでは正しくレンダリングされません（インラインブロックもしませんが、私がよく使うzoom: 1; *display: inlineハックがあります）。親よりも身長の小さい子供がいると、フロートで上に移動しますが、インラインブロックでは失敗することがあります。
ほとんどの場合、ブラウザがIEを除いて、すべてを正しく解釈します。あなたはいつもIEが吸い込まないことを確かめるためにチェックしなければなりません - 例えば、テーブル - セルの概念。
すべての現実において、はい、それは個人的な好みに帰着します。
余白を取り除くために使えるテクニックの1つは、親に0のfont-sizeを設定し、それから子供にfont-sizeを返すことです。
レコードだけのために、Spudleyの答えに加えるために、あなたが列幅を知っていればposition: absoluteとマージンを使う可能性もあります。
私にとっては、メソッドを選択する際の主な問題は、列全体を同じ高さにする必要があるかどうかです。ここで、table-cellが最も簡単な方法です（古いブラウザにあまり関心がない場合）。
私はinline-blockを好みますが、floatはまだHTML要素を組み合わせるのに便利な方法です。その他の場合.
