通常のドキュメント フローがフローティング ボックスに取って代わられるのはなぜですか?_html/css_WEB-ITnose

情報によると、
「フローティング ボックスは、その外縁が包含ボックスまたは別のフローティング ボックスの境界に接触するまで、左または右に移動できます。フローティング ボックスはドキュメントの通常のフローに含まれないため、ドキュメントの通常のフローはドキュメント フロー内のブロック ボックスは、フローティング ボックスが存在しないかのように動作します。「
情報にも、
」とあります。次の段落では、float:right スタイルの画像を追加します。右側の段落に移動します。 "

なるほど、テキストが画像を囲んでいます。これには私は混乱しました。私は他の人に彼に道を譲るように頼みました。それでも「彼が存在しないように振る舞う」と言えるでしょうか？
私の質問は、
Ｑ: CSSS のフローティング ボックスは通常のフローにないのに、なぜフローティング ボックスは上層のように下のコンテンツをカバーせず、通常のドキュメント フローにインデントさせるのですか?

ディスカッションへの返信（解決策）

意味がよくわかりませんか？ ? ?
これは、前の人があなたをブロックしているのに、それでも顔を見せたいと思って写真を撮るのと似ています。

フローティングは、Word のテキストの折り返し表示と同じように、通常のドキュメント フローから外れています

これは、写真を撮るのと少し似ており、前の人にブロックされますが、それでも顔を見せたいと考えます。

はい、私の理解では、レイヤーは同じものと同等です。露出できるのは頭だけで、残りは覆う必要があります。

でも実際には違います！

フローティングは、Word のテキストの折り返し表示と同じように、通常のドキュメント フローから分離されています

他に分離されていると言うのは、まだドキュメント フロー内にあるのではありませんか?たとえば、写真のフローティング設定がない場合、写真とテキストが次々と縦に配置されます。この「断捨離」とはどのような概念なのでしょうか？

以下のラインのフレーミングとクリーニングを見てください:
http://www.w3cschool.cn/css_positioning_floating.html


2 階の acesidonu からの返信を引用:

これは写真を撮るのと少し似ています。前の人があなたをブロックします、あなたはまだ見せびらかしたいのです。

はい、私の理解では、レイヤーは同じものと同等です。露出できるのは頭だけで、残りは覆う必要があります。

でも実際には違います！


3 階の li649905271 からの返信を引用:

フローティングは、Word のテキストの折り返し表示と同じように、通常のドキュメント フローから分離されています

分離とは何ですか、まだドキュメント フローの中にありませんか?たとえば、画像のフローティング設定がない場合、...

ドキュメントフローからの脱却とは、レイアウトの観点からの意味です

実は、これにこだわる必要はありません。 「ドキュメント フローから離れる」は、必ずしも他のドキュメント フローの要素に影響を与えないわけではありません。これは、概念の意味を理解する問題です。「ドキュメント フローから離れる」という認識を変えていただければ幸いです
さらに、フローティングのメカニズムは次のとおりです。要素がフローティングになった後、それに続くブロック ボックス (ボックス A に設定) はフローティング ボックスが存在しないかのように動作しますが、A ブロックに「ライン ボックス」がある場合は、フローティング ボックスが存在しないかのように動作します。 box [「ライン ボックス」の概念は「インライン ボックス」の概念とは異なることに注意してください。概念が異なります)] の場合、ライン ボックスはフローティング ボックスで覆われないように短縮されます。つまり、ボックスの場合です。 A、実際にはフローティングボックスで覆われていますが、ボックスAのコンテンツ領域にある「行ボックス」がコンテンツの境界線から整形されずに短縮され、フローティングボックスを囲んだような効果が得られます。作成者はこれを試して、A フレームの幅と高さを固定値に設定するか、フローティング フレームより大きくするか、フローティング フレームより小さく設定すると、このカバレッジ効果が明確に確認できます。
さらに詳しい情報については、次の 2 つの Web サイトをお勧めします。
1. http://www.w3schools.com、これは w3school の英語 Web サイトで、説明は中国語 Web サイトよりもわかりやすいと思います。

2. http://www.w3 .org/TR/2011/REC-CSS2-20110607/、これは W3C 公式 Web サイトの CSS2.1 仕様であり、パート 9 と 10 に焦点を当てています。