CSS の 3 つの通常配置、フローティング配置、および絶対配置の詳細な紹介

この記事では、CSSの3つの配置規則、フローティング、絶対配置について詳しく説明します

通常フロー、通常フロー、ドキュメントフロー

通常の通常フローの表示方法は次のとおりですfollow

通常の対応する要素の特性に従って表示され、インライン要素は 1 行を占め、ブロックレベルの要素は 1 行以上を占めます。

ブロックレベルの要素に従って、上から順に長兄、次兄、三兄が配置されています。これが通常の流れです。

フローティング

その名の通り、フローティングとは通常の流れの上に浮かぶことを意味します。機能: 複数のボックスを 1 行に配置する問題を解決し (通常、次のボックスは 1 行のみを占有し、複数のボックスは複数の行を占有します)、ボックスは高度に制御可能です。

フローティングの特徴: フローティング要素はソート時に上に揃えられます。

float:left;

長兄は浮いていないので、次兄の位置に合わせます。

フローティングは標準流量には影響せず、標準流量は元の位置にあります。ここの四男はフローティング設定ではなく、非常に高い位置にあります。上の小さな列は長兄とその他の列で覆われていますが、四男が列全体を占めています。 他の3兄弟はその体の上に浮かんでいます。

そのため、フロートは標準ストリームにオーバーレイされます。

フローティング並べ替えルール

ページ上に複数のフローティングボックスと非フローティングボックスが一緒に表示される場合、フローティングボックスはフローティングボックスと整列され、非フローティングボックスは非フローティングストリームのアライメントと一致します。

フローティングは要素の表示モードを変更します - 要素の表示モードは次のように変更されます。

left と right は、前のフローティング要素の位置にのみ影響します。同じ位置にある場合、左のフロートは左のフロートを検索し、右のフロートは右のフロートを検索します。

どのフロートが浮いているかに基づいて位置は何ですか?

浮動要素が見つからない場合は、標準ストリームの形式で解析されます。

浮動要素が見つかった場合は、浮動ルールに従って解析されます。フローティング後の要素の位置は、その要素が配置されている標準ストリームの位置となり、標準ストリームは上書きされます。

絶対位置決め

以上がCSS の 3 つの通常配置、フローティング配置、および絶対配置の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。