关于css float position 问题

Question

1、中间一个浮动元素，紧挨着一个相对定位。相对定位的文本在外面啥意思。

这里给出runjs的编辑代码

http://runjs.cn/code/rykql4nn

Answer 1

元素为相对定位时，它会基于普通文档流所在的位置进行偏移，但整体布局还是按照未偏移时的位置来计算。

在你的例子中，box和f1未偏移时应该位于test下方靠左的地方，且相互重叠，并且由于box是浮动的，所以f1中的内容应该环绕box，但是两者一样大，f1中的文本就被挤到下面去了。

下图是把box和f1的偏移都调为0之后，并增加f1的宽度时的截图。可以看到，此时2会环绕box，因此位于其右边。

Answer 2

被上一个元素的浮动影响了

Answer 3

浮动的产生的原因是什么，是使文字能够环绕图片（这里是你的box 1块）。而2为啥会跑到下面一行,因为这个文字大概需要一个16*20（根据文字大小行高而定）的空间，所以有背景区域这个文字都放不下，所以只好跑盒子意外去了。