float と inline-block について詳しく見る

この記事では主にfloatとinline-blockについての深い理解を紹介し、互換性や親要素への影響などの側面から分析しています。友人にも参考に勧めています

私の作業は比較的簡単でした最近、自分の canvas ライブラリを書いています... ブログを書くための十分な知識がなく、2 か月間行き詰まっていたので、今日は CSS ブログを書くことに時間を費やすことにしました。最近のプロジェクトのインターフェイスを書いているときに偶然これを見つけました...それでは、皆さんと一緒に半分詳しく理解しましょう
まず第一に、互換性

を使用する場合。 float は、どのブラウザと互換性があるかについて心配する必要はありません。非常に古い 属性です。

Inline-block は、IE8 以降 (8 を含む) でのみ使用できます。実際、インラインブロックは IE5.5 ですでに利用可能でしたが、実装が異なるため、IE の下位バージョンとの互換性を維持したい場合は、追加のコードを使用するしかありません

コードは次のとおりです:

display:inline; //改行を強制しない zoom:1; // hasLayout をトリガーするために使用され、詳細な理解に興味のあるサルはそれについて学ぶことができます

2 つ目は、何も言うことはありません親要素

inline-blockの影響について注意すべき点は、inline-blockが設定されたすべての要素に直接ギャップがあることです

コードは次のとおりです。

font-size
: 0; を削除すると、その結果は誰もが知っていますが、私はこれが最も単純で最も暴力的な方法だと考えています。もちろん、他の方法もありますので、自分で見つけてください

float。この属性を設定すると、要素はテキスト フローから外れます。これは

position

:absolute と同じですが、この属性が設定された要素では同じになりません。したがって、問題は、親要素が拡張されないことです。子要素のサイズは変化しますが、親要素が inline-block に設定されている場合、長さと幅は子要素に応じて変化します (ブラウザが inline-block と互換性がある場合)。 inline-block を直接使用します~)。したがって、親要素に inline-block 属性を設定しない場合は、

float をクリアする必要があります

。最後の float 要素の後、親要素

clear

: 両方 (おそらく原則は、親要素のサイズを配置するためにテキスト フローを持つ要素を使用することです)、親要素の高さがフローティング要素によって変更されるようにします

最後に、他にも小さな違いがいくつかあります

ベースライン: float と inline-block のベースラインは異なります

float のベースラインは、浮動要素がそれに近いことです 一番上の

inline-block のベースラインはデフォルトのベースラインですなので、より柔軟で ​​

vertical-align

と併用できます。 最後に...個人的には、まだ inline-block を使用することを好み、ほとんどの場所で Float を使用できます。要素を囲みたい場合の唯一の解決策です

以上がfloat と inline-block について詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。