被上一個元素的浮動影響了

元素為相對定位時，它會基于普通文檔流所在的位置進行偏移，但整體布局還是按照未偏移時的位置來計算。

在你的例子中，box和f1未偏移時應(yīng)該位于test下方靠左的地方，且相互重疊，并且由于box是浮動的，所以f1中的內(nèi)容應(yīng)該環(huán)繞box，但是兩者一樣大，f1中的文本就被擠到下面去了。

下圖是把box和f1的偏移都調(diào)為0之后，并增加f1的寬度時的截圖?？梢钥吹剑藭r2會環(huán)繞box，因此位于其右邊。

浮動的產(chǎn)生的原因是什么，是使文字能夠環(huán)繞圖片（這里是你的box 1塊）。而2為啥會跑到下面一行,因為這個文字大概需要一個16*20（根據(jù)文字大小行高而定）的空間，所以有背景區(qū)域這個文字都放不下，所以只好跑盒子意外去了。