Why does the ordinary document flow give way to a floating box?_html/css_WEB-ITnose

According to the information,
"A floating box can move left or right until its outer edge touches the containing box or the border of another floating box. Since the floating box is not in the normal flow of the document, So the block box in the normal flow of the document behaves as if the float box does not exist. "
The information also says, "In the following paragraph, we add an image with the style float:right. The image will float to the right of the paragraph. "

I see that the text is surrounding the image. This confused me. I asked others to give way to him. How could I still say "act like he doesn't exist"?
My question is,
Q: Since the CSS floating box is not in the normal flow, why does the floating box not cover the content below like the upper layer, but let the normal document flow indent it? ?

Reply to discussion (solution)

Don’t quite understand what it means? ? ?

This is a bit like taking a photo. The person in front blocks you, but you still want to show your face.

Floating is out of the normal document flow, just like the text wrapping display in word

This is a bit like taking a photo. The person in front blocks you, but you still want to show your face.

Yes, my understanding is that layers are equivalent to the same. Only the head can be exposed, the rest must be covered.
But actually not!

Floating out of the normal document flow, just like the text wrapping display in word
What else is it called out of the way? Isn’t it still in the document flow? For example, if there is no floating setting for the pictures, then the pictures and text are arranged vertically one after another. What kind of concept is this "detachment"?

Look at the line boxing and cleaning below:
http://www.w3cschool.cn/css_positioning_floating.html

Quoting the reply from acesidonu on the 2nd floor:

This is a bit like taking a photo. The person in front blocks you, but you still want to show your face.

Yes, my understanding is that layers are equivalent to the same. Only the head can be exposed, the rest must be covered.
But actually not!


Quoting the reply from li649905271 on the 3rd floor:

Floating is separated from the normal document flow, just like the text wrapping display in word

What else is it called separated? Isn't it still in the document flow? For example, if there is no floating setting for the picture,...

What I mean by breaking away from the document flow is from the perspective of layout.

Don’t get hung up on this. In fact, "breaking away from the document flow" does not necessarily benefit other people. The elements in the document flow have no effect. This is a matter of understanding the concept. It would be great if you change your understanding of "out of the document flow"

In addition, the floating mechanism is like this: after the element floats, it follows The subsequent block box (set to box A) behaves as if the floating box does not exist. However, if there is a "line box" in the block box A [note the concept of "line box" Different from the concept of "inline box")], then the line box will be shortened to avoid being covered by the floating box. That is to say, for the A box, it is actually still covered by the floating box, but in the A box The "line box" in the content area is shortened and is not formatted from the boundary of the content, achieving the effect of a surrounding floating box. The author can try this, set the width and height of the A frame to fixed values, or be larger than the floating frame, or smaller than the floating frame, and you can clearly see this coverage effect.
For more detailed knowledge, I recommend two websites to you:
1. http://www.w3schools.com, this is the English website of w3school, and I feel that the explanation is clearer than the Chinese website;
2. http ://www.w3.org/TR/2011/REC-CSS2-20110607/, this is the CSS2.1 specification in the W3C official website, focus on parts 9 and 10.