同一div內(nèi)的兩個(gè)div，其中float:left;如果在前面，那么會(huì)產(chǎn)生占位。????why？我感覺(jué)應(yīng)該是兩個(gè)div的內(nèi)容進(jìn)行重疊，可為什么沒(méi)重疊，而第一個(gè)div float:left;還占位了？<div id="one" style="width:500px; height:30px; border:1px solid black;">? ? <div id="lfInOne" style="float:left;width:100px; height:30px; background:yellow;">float的內(nèi)容</div>? ? ? ? <div id="inOne" style="width:500px; height:30px;">標(biāo)準(zhǔn)文檔流的內(nèi)容</div> ? ? ? ?</div>
3 回答
已采納
淡雅的默
TA貢獻(xiàn)102條經(jīng)驗(yàn) 獲得超139個(gè)贊
float是針對(duì)元素的浮動(dòng)定位，并不是絕對(duì)定位，如果你的float改成position：absolute，那么兩個(gè)元素就是重疊；
float浮動(dòng)后，元素本身還是要占據(jù)父元素內(nèi)的空間的，就比如說(shuō)，你桌子上有兩個(gè)筆記本，其中一個(gè)向左邊靠，另一個(gè)沒(méi)有給他位置，可以隨意的，那么向左的那個(gè)本身還是占據(jù)了桌子的空間；
那么講解下position定位；position定位常用的三種；
1、relative，相對(duì)定位；相對(duì)定位只根據(jù)父元素的位置定位，一般默認(rèn)是在父元素下面沒(méi)有任何樣式，可以自己規(guī)定相應(yīng)的樣式；
2、absolute，相對(duì)于父元素的絕對(duì)定位，這是定位一般用在元素內(nèi)需要進(jìn)行絕對(duì)定位的元素，（如：我想把一個(gè)圖片絕對(duì)定位到元素內(nèi)的左下角，一般這樣寫(xiě):img{position:absolute;right:0;bottom:0;}）注意的是，元素使用絕對(duì)定位后，那么它的父元素需要進(jìn)行一次相對(duì)定位，不然絕對(duì)定位的元素是以body（也就是整個(gè)網(wǎng)頁(yè)）來(lái)進(jìn)行定位的；
3、fixed，相對(duì)于瀏覽器窗口來(lái)定位；這個(gè)定位一般用到的地方，如網(wǎng)頁(yè)右側(cè)的聯(lián)系彈框，返回頂部，分享等；
怎么使用呢？
樣式（以類(lèi)名為top為例）：.top{positon:fixed;left:0;top:100px;}表示：元素顯示在瀏覽器的最右邊，距離頂部100px的距離；
-
咕咕問(wèn)萬(wàn)分感謝
ikonorion
TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超1個(gè)贊
1、div本身
2、div的內(nèi)容
你要區(qū)分清楚這兩者的區(qū)別和聯(lián)系。
div本身是互相重疊的，而div的內(nèi)容沒(méi)有重疊
你可以給div id="lfInOne" 和?div id="inOne" 兩個(gè)盒子分別加上不同顏色的邊框，就能直觀看到。
而div里面的內(nèi)容，因?yàn)槟阍O(shè)置了float，規(guī)定第一個(gè)盒子的內(nèi)容向左面流動(dòng)，所以就沒(méi)有重疊。
參考2樓，你可以將：
float：left 改成 position:absolute
或者改成 position:relative
看看三者的區(qū)別。
希望能幫到你，我也是初學(xué)者。
-
咕咕問(wèn)萬(wàn)分感謝
慕郎_蓮華
TA貢獻(xiàn)83條經(jīng)驗(yàn) 獲得超16個(gè)贊
float 的元素的后面的元素會(huì)跟在后面， 如果 當(dāng)前行 的剩余空間 小于 后面元素的寬度，， 后面元素就會(huì)換行
-
咕咕問(wèn)我的第一個(gè)是float所以這個(gè)脫離的標(biāo)準(zhǔn)文檔流，因此后面的width:500px;才能在于父元素的width長(zhǎng)度相等的情況下沒(méi)有換行？ float 后面的元素不是跟在float的后面，你試試在后面的div里面加上一個(gè)background:red;position:relative;
添加回答
舉報(bào)
0/150
提交
取消