CSS で display:inline-block と float:left を使用する利点 質問する

3つの言葉で言えば、inline-blockより良いです。

インラインブロック

このアプローチの唯一の欠点display: inline-blockは、IE7 以前では、要素はデフォルトでinline-blockすでに表示されている場合のみ表示されることですinline。つまり、要素を使用する代わりに、<div>要素を使用する必要があります。意味的には、はページを分割するためのものであり、はページの範囲をカバーするためのものであるため、意味上大きな違いはないため、<span>これはまったく大きな欠点ではありません。の大きな利点は、後で他の開発者がコードをメンテナンスするときに、またはステートメントよりも、およびが何を達成しようとしているのかがはるかに明確になることです。このアプローチの私のお気に入りの利点は、が使いやすく、直感的に要素を完璧に中央に配置することです。クロスブラウザのインラインブロックを実装する方法に関する優れたブログ投稿を、<div><span>display:inline-blockdisplay:inline-blocktext-align:rightfloat:leftfloat:rightinline-blockvertical-align: middleline-heighttext-align: centerMozilla ブログ. ここはブラウザの互換性。

浮く

floatこのメソッドの使用がページのレイアウトに適していない理由は、 floatCSSプロパティがもともとはテキストを画像の周りに折り返すことだけを目的としていました（雑誌スタイル）設計上、一般的なページレイアウトには適していません。後でフロート要素を変更すると、配置の問題が発生することがあります。ページフローに含まれていないもう一つの欠点は、一般的にはクリアフィックスが必要で、そうしないとページの一部が壊れてしまうことです。クリアフィックスでは、フロート要素の後に要素を追加して、フロート要素の動きを止める必要があります。親が倒れないように彼らの周囲には、スタイルと内容を区別する意味的な境界線を越える部分があり、ウェブ開発におけるアンチパターン。

上記のリンクに記載されている空白の問題は、white-spaceCSS プロパティで簡単に修正できます。

編集：

サイトポイントはウェブデザインのアドバイスに関する非常に信頼できる情報源であり、私と同じ意見を持っているようです。

CSS レイアウトを初めて学ぶ場合、CSS フロートを独創的な方法で使用することが最高のスキルであると考えるのは無理もありません。CSS レイアウトのチュートリアルをできるだけ多く読んだことがある場合、フロートをマスターすることは通過儀礼であると考えるかもしれません。その独創性に驚かされ、複雑さに驚かされ、フロートの仕組みを最終的に理解したときに達成感を得られるでしょう。

騙されないでください。あなたは洗脳されています。

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

2015年更新 - Flexboxは最新のブラウザ:

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}