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