ドキュメント フロー フロートのクリアと css_html/css_WEB-ITnose のレイアウト

ドキュメントストリーム

ドキュメントフローとは何か、一連の連続したものとは何ですか

HTMLで書いた要素システムは、データフローを順番にページ上に左から右、上から下の順に配置します

もちろん、配置プロセスにはインライン要素とブロックレベル要素の概念が含まれます

簡単な説明

ブロックレベル要素: div など 各 div 要素は 1 行を占めます。幅が設定されていない場合は、デフォルトで行全体が埋められます。幅が指定されている場合は、幅が小さくても次の要素を 1 行に配置する必要があります。

インライン要素: たとえば、A がインライン要素の後の要素である場合、

Floating

の下ではなく、A の右側に配置されます。ドキュメントフローについて話した後、フローティングについて話しましょう

上の例では、3 つの div はそれぞれ 1 行を占めるブロックレベルの要素ですが、問題は、それらのレイアウトを次のようにしたいことです。

最初にコードを見てください

すごいです
ほら、コードの最初の行に余分な float:left があります

これは、この要素をドキュメント フローの制限から逃れて、それをラップするコンテナに「フロート」させることを意味します(この時点ではドキュメント フローには存在しません)

ここで、3 つの div の幅パラメータを見ると、濃い赤色の幅は 80 です。右側の 40 ピクセルと右側の 40 ピクセルのみが表示されます。左はドキュメントに含まれています。フローの外側のピンクの div はブロックされています

この画像のコードは次のとおりです

うわー
Chrome ブラウザを使用して検査要素を開くと、

が表示されます。

実際、青い 111div は上からです。行に配置されたピンクの div は、その一部をブロックするためにその上に配置されます

(lll asdf は同じコードを中央に出力し、editplus と chrome で異なるように表示します)これは、説明メカニズムが異なるためであるはずです)

これは、上で述べたこととも一致します。 ドキュメント フローの理論: 要素が float 属性を持つ場合、その要素はドキュメント フローから削除され、要素はドキュメントフロー内の配置は、あるべき場所に配置されます。しかし、問題は、asdf の先頭行も書くことはできないのですか?

これには、float の詳細なレイアウト方法が含まれます。

特定の div 要素 A が浮動小数点であり、A 要素の前の要素も浮動小数点である場合、A 要素は前の要素の後に続きます (これら 2 つの要素を 1 行に配置できない場合、A 要素は次のように圧縮されます)。次の行); A 要素の前の要素が標準フロー内の要素である場合、A の相対的な垂直位置は変更されません。つまり、A の上部は常に下部に位置合わせされます。前の要素。

div の順序は、HTML コード内の div の順序によって決まります。

ページの端に近い端が表面、ページの端から遠い端が裏面です。

次に、別の質問があります。a 自体がフローティングではない場合はどうなるでしょうか。これは少し混乱します。a がフローティングではない場合、それは依然としてドキュメント フロー内にあります。これは、下の図の大きな赤いブロックで説明されているものです

それでも理解できない場合は、自分でコードを数行入力して効果を確認してください。

ページの先頭要素 LLL を分析すると、フローティング ラベルがあるので、LLL を付けます。フロント要素の右側

asdf 1 つの要素は LLL なので、asdf は LLL の真下に配置されます。これが図の効果です

どうすればよいでしょうか?

clear

デフォルト値。浮遊オブジェクトは両側で許可されます
left : 浮遊オブジェクトは左側で許可されません
Right : 浮遊オブジェクトは右側で許可されません

Both : 浮遊オブジェクトは許可されません

clear 自体は浮遊効果をクリアすることです要素自体の情報です

asdf にclear:left を追加するのはOKです

おすすめ情報

(以下の記事は私の記事よりはるかに優れています。私の情報は基本的にここから来ています。皆さんもぜひご覧ください) )

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html#unknown

🎜 🎜