爲什麼浮動：使div浮動到左邊？

我是新來的CSS。我試圖在另一個div（#container）的右下角放置div（#inner）。我寫了float: right;但是當運行Html時，我看到底部的左邊的的內部div容器的角落。這是爲什麼？代碼有什麼問題？爲什麼浮動：使div浮動到左邊？

#container { 
 
    position: relative; 
 
    border: solid; 
 
    width: 70%; 
 
    height: 40%; 
 
} 
 
#inner { 
 
    position: absolute; 
 
    border: solid; 
 
    bottom: 0; 
 
    float: right; 
 
    width: 30%; 
 
    height: 30%; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    ABC 
 
    </div> 
 
</div>

來源

2017-01-17 cookya

使用float絕對定位並沒有真正意義。我想你想要的是right:0而不是float:right

#container { 
 
    position: relative; 
 
    border: solid; 
 
    width: 70%; 
 
    height: 40%; 
 
    overflow: auto; 
 
} 
 
#inner { 
 
    position: absolute; 
 
    border: solid; 
 
    bottom: 0; 
 
    right:0; 
 
    width: 30%; 
 
    height: 30%; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    ABC 
 
    </div> 
 
</div>

來源

2017-01-17 15:46:49 j08691

這裏是關於定位的一些有用的文檔，你應該看看。 http://www.barelyfitz.com/screencast/html-training/css/positioning/ –

This works。但是，你能否解釋爲什麼在使用position：absolute時爲什麼使用float沒有意義？ – cookya

第二個答案在http://stackoverflow.com/questions/11333624/float-right-and-position-absolute-doesnt-work-共同揭示了爲什麼 – j08691

只是刪除的絕對位置。另外，如果你想在容器來包裝浮法/秒，加上「溢出：汽車」的容器元素：

#container { 
 
    position: relative; 
 
    border: solid; 
 
    width: 70%; 
 
    height: 40%; 
 
    overflow: auto; 
 
} 
 
#inner { 
 
    border: solid; 
 
    bottom: 0; 
 
    float: right; 
 
    width: 30%; 
 
    height: 30%; 
 
}

<div id="container"> 
 
    <div id="inner"> 
 
    ABC 
 
    </div> 
 
</div>

來源

2017-01-17 15:48:59 Johannes

不幸的是，這個解決方案的內部div在右上角在這種情況下，不在右下角 – cookya

中，根本不使用浮點數，而只使用絕對位置。 – Johannes

你必須刪除「的立場：絕對」

來源

2017-01-17 16:01:43 Marco

爲什麼浮動：使div浮動到左邊？

回答

相關問題