1.inline(行内元素)：
- 要素は、インライン要素となり、インライン要素が特性を有し、その行はない別の行に、他のインライン要素と共有することができ
- あなたはコンテンツによって、気晴らしの大きさを、高さ、幅の値の要素を変更することはできません。
- あなたは、左右のパディングアップと効果を生成するために、ダウン効果、マージンだけ左右の余白を使用することができますが、トップとボトムは動作しません。
2.block（ブロック要素）
- 要素は、親要素の幅を埋めるために、デフォルトのブロック要素によって、それらの幅を設定することなく、ブロックレベル要素、別の行になること
- 要素は、高さ、幅の値を変更することができます
- 詰め物を提供することができる、マージン、上、左、下の各属性の値は、右マージンは効果を生み出すことができます
3.inlineブロック（ブロックレベルにおける融合線）：
- いくつかのインラインで、上述した第一のインラインブロック1と第2と第三の特徴と組み合わせて、ブロックの結合特性
- 普通の言葉では、専用線ブロックレベル要素ではありません。図：
図1：
図2：
二つは、ディスプレイを見ることができる：ブロック要素の後にインラインブロックは異なるがある場合、効果はほぼ同じフロートであることを同じ行に表示することができます。
二、インラインブロックフローティングレイアウトレイアウト対
素子ディスプレイ設定する：テキストフロー要素から逸脱することなく、インラインブロックを、そのようにテキストストリームからフロート要素、ならびに親要素と崩壊の高さの影響を除いて、
共通のa、b、：同じ効果をある程度達成することができます
のは、これら2つのレイアウトを見てみましょう。
図I：表示：インラインブロック
図2：二人の子供の使用はフロート：隠された、効果は以下のとおりである：左、私は浮い、ボックスのオーバーフローを使用して閉じるには、崩壊する親要素の高さである最後の浮動レイアウトでの話しました：
>> 2は、ほぼ同じ効果を行うことができます一見、（ディスプレイを見て：インラインブロックギャップを問題に、以下再訪するために、これを残して）
広い格差：C、浮動レイアウトは良い場所ではありません我々はAの効果を見て
図3：
図4：
図3から分かるように、4 >>フローティング制限は、要素を充填行に、ラップもきちんと配置され、サブエレメントの高さは、他の3つのレンダリングが存在するであろう、ジョブを一致する必要があり、インラインブロックにはありません。
小さな問題の3.inlineブロックがあります：
。上記の表示で見ることができます：インラインブロックした後、ギャップの問題があり、4つの画素のギャップ、問題の原因は、ラップは、我々はタグを記述するため、通常、簡単にラベル終末後のリターンを作る引き起こしたということです車、キャリッジは、一般的には、複数の連続した空白は空白文字にマージされます、キャリッジ、キャリッジリターン、ホワイトスペースと同等のものを持っていますが、「ギャップ」を使用するための本当の理由はこれです、私たちを聞かせてあまり注目の空白。
。Bボイド方法を削除します。
図1に示すように、親要素が追加、{フォントサイズ：0}であるフォントサイズが0に設定されているの周りに、次に、それによってボイドを除去する、0PX空白となること
このアプローチは現在、Chromeブラウザは、以前と互換性のあるブラウザの様々な互換性がありませんしました
図1：
。Cのブラウザ互換性：IE6 / 7は、ディスプレイと互換性がありません：インラインブロックに追加の処理がされた：だから
でIE6 / 7：
{：インラインブロックdislplay;}直接インライン要素のための
ブロックレベル要素のための： {ディスプレイ：インライン;ズーム：1を加えます ;}
4.まとめ：
dispay：インラインブロックレイアウトと浮動レイアウト、使用する正確に一つ、私はそれが実際の状況に応じて決定されるべきだと思います。
、物事の水平配置のために、私はそれがクリアされているので、レイアウトにインラインブロックを使用することを好むしない、だけでなく、もはやように混乱し、浮動、恐怖のレイアウトなどの透明フロート。
bは、必要なときにテキストの折り返しのためのレイアウトに浮かぶため、結局、これが真のフローティング・アリーナで、水平インラインブロックに渡す事を配置されています。
転送します。https：//www.cnblogs.com/Ry-yuan/p/6848197.html