CSS のフローティング プロパティの簡単な紹介

CSS の floatfloating 属性 を導入するには、まず標準ドキュメント フローを理解する必要があります

標準ドキュメント フロー:

CSS の介入がなければ、ブロックレベルの要素は単独で 1 行を占めます。幅と高さを設定すると、インライン要素が並べて表示され、幅と高さが自動的に埋められます。

HTML ページの標準的なドキュメント フロー (デフォルト レイアウト) は、上から下、左から右で、ブロック (ブロック レベルの要素) に遭遇すると改行が入ります。

float 属性の最初の使用法は、新聞でよく見られる、ターゲット コンテンツをテキストで囲むことでした。その後、主にコンテンツを横に並べて配置するために使用されました。レイヤー: 要素の float 属性に値を割り当てた後、要素はドキュメント フローから分離され、親要素の左右の境界線の近くで左右にフロートします (デフォルトは本文テキスト領域)。

float の属性の紹介:

left

: 要素は左にフロートします。

right

: 要素は右にフロートします。

フローティングの特徴:

【1】子のフローティングにより親の高さが崩れる 解決策: 1. 親に再度高さを追加する 2. overflow

: hidden

を使用する。 【2 】フローティングラッピング:

ブロックレベル要素:

コンテンツ領域にラップされ、行全体を占めることはなくなりましたが、依然としてコンテンツの長さと一致する長さを持ちます。本文は依然としてブロックレベル要素です。

インライン要素: float を設定した後、display

属性が変更され、ブロックレベル要素になり、幅と高さを設定できるようになります。

【3】フローティング要素はpadding

エリアを通過しません

【4】フローティング要素はドキュメントフローから外れ、他の要素に影響を与えます。

以上がCSS のフローティング プロパティの簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。