float と inline-block についての考え

フロート

利点:

横に並べるとより便利で、ブラウザの互換性の問題もありません。

短所:

1) 複数の行を横に並べた場合、折り返すと上の行が表示されなくなる場合があります。

2) フローティング後、現在のフローから飛び出し、親要素が高度に折りたたまれます。このソリューションは比較的成熟しており、ブラウザーの互換性の問題はありません。

インラインブロック

短所: 最大の問題は、ブラウザが異なると白いギャップを解決する方法が異なるため、統一するのが難しく、互換性が低いことです。一般的な解決策は、親要素に font-size:0 を設定することです。ほとんどのブラウザではこれが可能ですが、そうでないブラウザでは、レイアウトに影響を与えずに display: table を追加できます。個人的に、私はレタースペースとワードスペースを使用するのが好きではありません。ブラウザが異なれば問題も異なると常々感じています。

利点: 行の折り返し中に先頭行が表示される場合、text-align、white-space、その他の属性を使用して両側を揃えることができ、その効果は優れています。ラインを折り返さないと、奇跡的な効果が得られることもあります。

最初にこれを書いて、時間があるときにさらに追加します