1. A floating element in the middle, next to a relative location. What does the relative positioning of the text mean on the outside.
Here is the runjs edit code
When the element is relatively positioned, it will be offset based on the position of the normal document stream, but the overall layout is calculated according to the position when it is not offset.
In your example, when box and F1 are not offset, they should be at the lower left of test and overlap with each other. Because box is floating, the content in F1 should surround the box, but they are the same size, and the text in F1 will be squeezed below.
The following figure is a screenshot when the offset of box and F1 is set to 0 and the width of F1 is increased. As you can see, 2 will surround the box, so it's on the right.
Affected by the float of the previous element
What's the reason for the floating? It makes the text surround the picture (here is your box 1 block). Why does 2 run to the next line? Because this text needs a space of 16 * 20 (depending on the size and height of the text), it can't fit the text in the background area, so it has to run to the box.