鍍金池/ 問答/HTML/ 關(guān)于css float position 問題

關(guān)于css float position 問題

1、中間一個(gè)浮動(dòng)元素，緊挨著一個(gè)相對(duì)定位。相對(duì)定位的文本在外面啥意思。

clipboard.png

這里給出runjs的編輯代碼

http://runjs.cn/code/rykql4nn

回答
編輯回答
悶油瓶

clipboard.png

被上一個(gè)元素的浮動(dòng)影響了

2018年2月6日 13:00
編輯回答
寫榮

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

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

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

clipboard.png

2017年7月4日 13:31
編輯回答
吃藕丑

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

2018年1月16日 11:54