undefinedfix
Sign in

On CSS float position

En0w1na edited in Thu, 28 Oct 2021

1. A floating element in the middle, next to a relative location. What does the relative positioning of the text mean on the outside.

clipboard.png

Here is the runjs edit code

http://runjs.cn/code/rykql4nn

3 Replies
XPDIN
commented on Thu, 28 Oct 2021

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.

clipboard.png

kcomf
commented on Thu, 28 Oct 2021

clipboard.png

Affected by the float of the previous element

EvgeniyRRU
commented on Thu, 28 Oct 2021

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.

lock This question has been locked and the reply function has been disabled.