インラインブロックは空白対応で、実際の内容とスタックの自動幅はHTMLの順になります。フロートはclearfixメソッドを必要とせず、ブロック要素に基づいています。これらのエレメントは、使用可能なスペースに自動的に横幅を持ちます。純粋に意味論的に、インラインブロックは、ホワイトスペース認識形式と順序の重要性から、意味が少なくなります。しかし、それを純粋に機能的な方法で見ると、どちらもグリッド用ではありません。疑似CSSでない場合は、意味のないHTMLタグclearfixeも使用します。私の信じるところでは、彼らはどちらも勝者ではありません。しかし、フレックスボックスが今後数年間で必須となる時代には、もう一つの選択肢はありません。インラインブロックと
：
<div>
<div style="display:inline-block; width:30%;">col1
</div><div style="display:inline-block; width:70%;">col2</div>
</div>
タグは任意のガターを閉じ、/追加一緒に接着しなければなりません。コンテナdivは、項目を別々の行の一部にするために必要です。フロートと
：
<div class="clearfix">
<div style="float:left; width:30%;">col1</div>
<div style="float:left; width:70%;">col2</div>
</div>
Clearfixは「行」を強制することが必要である（任意の通常の流れのアイテムの問題を却下するか、フロート後に浮かぶ）
かどうか一つを使用するか、他のは問題ですあなたの目標（と味）。浮動小数点数よりもインラインブロックが好きだと言う必要があるのは、両方の列幅を知っているか相対サイズ（％）を使用している限りです。私はそれが、どのように使用されるべきかにかかわらず、問題ではない問題に対して、clearfix、浮動小数点型の浮動小数点型よりも直感的で予測可能だと思います。インラインブロックの空白認識のみが、
皮肉なことに、表はまったく問題ありません（インラインブロックを順序どおりに配置する必要があるため、ここで議論する動機があります）。
私たちが反応性について話しているなら、テーブルはインラインブロックを失います。たとえば、デスクトップに4列あり、タブレットに2列、モバイルに1列が必要です。インラインブロックでは、幅を他の幅に設定して、うまくいきなりラップします（折れたときの余白に注意してください）。テーブルでは、あなたは実際の行に拘束されています。これはかなり頑固になります。 Flexboxは長い間必要とされ、美しく見えます。特定の状況では、レイアウトを柔軟に調整できます。
私はブートストラップを使用しましたが、人々のクレジットとその態度を与えられていないことに疲れました。しかし、彼らが何かしたことを学ぶのは便利です。彼らは相対的なグリッドサイジングを使用している3.0を読んでください。ネストされたグリッドと整列に問題があります。
---- --a- ---- ----
---b------
.... ..c.
Col aは正常な親の親である。 Col cは、bの子ネストされたcolです。パディングとボーダーボックスモデルを使用している場合を除き、ガターがコンテナに対して可変であるため、cとaを相対サイズで揃えるのは難しいです。しかし、そのようにすれば、多くの柔軟性が失われます。あなたは、いくつかの背景とパディングを持つcolをしたいときは、グリッドシステムを台無しにしているので、コードを混乱させるスタイルを設定するコンテナを使用する必要があります。彼らがこれに対する解決策を見つけたかどうかはまだ研究していません。私はまだいない。私は固定されたピクセルに行きましたが、それは応答的なデザインでは、いくつかの固定幅を持つことができ、モバイルの周りのすべてが相対的なグリッドを使用できることを意味します。
あなたの答えはありがたいですが、確かにimgはインライン要素であり、pはブロックレベルの要素であり、その逆ではありませんか？:) – orustammanapov
実際には、 'img'と' p'の両方がブロックレベルです要素。私は答えを修正した。 – Mojtaba
私は申し訳ありませんが、私の間違いインラインレベル要素ではなく、レベル要素をブロックしません。 ** img **タグは**デフォルトで**インラインブロック**です。ブロックレベルの要素のように幅と高さを定義できますが、同じ行の他の要素と一緒にフローティングすることなくインラインでフローできます。 – orustammanapov