CSSで要素を一列に配置する場合のdisplay:inline-blockとfloatの違い

レイアウトの際、多くのデザインでは要素を一列に配置する必要があります。互換性と使いやすさの観点から、最初に display:inline-block (インライン ブロックとして表示) を導入します。そして浮く（浮く）。

。浮遊要素の特徴は何ですか?以下に示すように:

1. は幅と高さをサポートします。

2. 幅が設定されていない場合、幅はコンテンツによって拡張されます。指定された順序 フローティング要素に到達するか、親の境界で停止するまで移動します

3. 要素がフローティングになった後、フローティング要素の親の高さはドキュメント フローから切り離されます
   。要素がフローティングになると、上下のマージンは再度スタックされなくなり、

4. が BFC をトリガーします。

5. inline-block: インライン要素の特性とブロックレベル要素の特性の両方を備えたインライン ブロック。以下に示すように:

6. は幅と高さをサポートします。

7. コードの改行はスペースに解析されます。

8. 幅が設定されていない場合、幅は

デフォルトでは inline-block タイプの要素の下部にギャップが生じます。

1. トリガーは上マージンと下マージンを重なりません。 BFC。

2. これら 2 つのスタイルの特徴から、1. 幅と高さをサポートする、2. 1 行で表示する、3. コンテンツが設定されていない場合は幅がサポートされる、という点で同じであることがわかります。 7. 上下のマージンが重なり合わず、8. BFC がトリガーされます。この機能を連続して表示すると、連続して配置できる 2 つの要素が決まります。したがって、違いを使用する場合は、それぞれの異なる特性から分析を開始する必要があります:

3. 配置方向の制限。 float の 4 番目の特性は、要素の順序を決定できることを決定します。 float:left: 要素は左から右に配置されます。 float:right: 要素は右から左に配置されます。また、display:inline-block は左から右にのみ使用できます。

4. 書類の流れから脱却するかどうか。フローティング要素はドキュメント フローから外れますが、display:inline-block はそうではありません。したがって、最初の浮動要素または inline-block 要素がすでに行を占有しており、2 番目の要素に margin-left:-100% を追加すると、2 番目の浮動要素が 2 番目の浮動要素を覆います。要素、2 番目の inline-block は新しい行に表示され、margin-left に従って移動されます

5. フローティング要素は親の高さによって折りたたまれます。親要素の高さが崩れないようにするには、float を使用するときにこの機能を処理する必要があります。親の高さを設定するか、float をクリアしてください

6. インラインブロックの下部にギャップがあります。デフォルトでは要素。 Web ページを作成するときは、垂直方向の配置を設定する必要があります。

7. インラインブロック型要素は、HTML コードが折り返されるときにスペースを生成します。 to: inline 要素を 1 行で記述するか、スタイルで inline 要素の親の font-size を 0 に設定します

上記の違いの分析から、float と inline の長所と短所がすでにわかります。 -block: float の後、ほとんどの場合、float をクリアするか、高さを設定する必要があります。 display:inline-block はデフォルトの配置（左から右）を変更せずにのみ使用でき、コードの折り返しによって生じる下部の隙間と左右のスペースをクリアする必要があります。

以上がCSSで要素を一列に配置する場合のdisplay:inline-blockとfloatの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。