Float disconnects from Document Stream

Q: Floating elements do not occupy any normal Document Stream space. The positioning of floating elements is based on the normal Document Stream. Then, they are extracted from the document stream and moved as far as possible to the left or right. The text content is surrounded by floating elements. When an element is extracted from a normal Document Stream, other elements in the Document Stream ignore this element and fill in its original space.
However, since the floating element does not occupy any normal file stream space, why does the text not exist under the DIV but surround the div?

 

A: This is the floating feature. A common block-level element is located at the lower layer of the floating element, but its internal text (and the line element) will surround the floating element.

The concept of float is derived from the left/right alignment of the image, and the left/right alignment of the image aims to wrap the text in the image.

Therefore, this is the floating feature.

 

 

Float
Left: Right of the document flow object
Right: Left of the document flow object
Position
Absolute: drag an object out of the Document Stream and use left, right, top, bottom, and other attributes to absolutely locate the parent object with the most positioning settings relative to the object closest to it. If such a parent object does not exist, it is based on the body object. Its stack is defined by the Z-index attribute.
REFERENCE The css2.0 manual above.

There has never been a clear definition of the Document Stream concept. A consistent view is the top-down writing order of the document.
There are many different interpretations of the elements that drag out the document stream. In my opinion, such elements do not affect the element location around them. Out of the Document Stream. It is because haslayout is often encountered in IE. Therefore, it often creates the illusion of "no real disconnections.