為什么<div>不能置底？
在HTML中，元素的定位是由其在頁面流中的位置決定的。當我們用<div>元素創建一個包裹內容的容器時，容器的位置取決于其周圍內容的大小和位置。由于<div>是一個塊級元素，默認情況下它會占據其父元素的整個寬度，并且會在頁面流中自動換行。這意味著它將根據其前面的內容進行布局定位。
無論是在靜態頁面的設計中還是在動態頁面的開發中，我們經常會遇到需要將一個元素置于頁面底部的情況。不過，由于<div>元素的渲染機制，我們會發現無法直接將其置底。但是，我們可以采用其他方法來實現這一效果。
代碼案例：使用position屬性將<div>置底
在CSS中，我們可以使用position屬性來改變元素的定位方式。通過將<div>元素的position屬性設置為fixed，可以將其相對于瀏覽器窗口固定定位。這樣就可以實現將<div>置于頁面底部的效果。
<style>
.container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #f0f0f0;
padding: 20px;
}
</style>
<br>
<div class="container">
<p>這是一個置底的<div>元素</div>例子</p>
</div>在以上代碼案例中，我們通過將.container元素的position屬性設置為fixed，將其固定到頁面底部。同時，我們設置了left和bottom屬性來確定.container元素在瀏覽器窗口的位置，并且為.container元素添加了padding來增加內邊距，提高可讀性。
參考真實案例：Footer置底
在實際的網頁設計中，我們經常會需要將頁面的底部內容固定在瀏覽器窗口的底部，比如網頁的footer部分。下面是一個實際案例，使用CSS將頁面的footer部分置底。
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #f0f0f0;
padding: 20px;
}
</style>
<br>
<div class="footer">
<p>這是一個頁腳示例</p>
</div>以上代碼案例將.footer元素設置為固定定位，并將其放置于瀏覽器窗口的底部。這樣，無論頁面的內容有多少，footer都會一直保持在頁面底部，不會因為內容的增加而被推上去。
來說，<div>元素默認情況下是不能夠置底的。不過我們可以通過使用CSS中的position屬性將其相對于瀏覽器窗口底部進行固定定位，從而達到將<div>置底的效果。這樣的技巧在實際的網頁設計和開發中非常有用，特別是對于需要固定在頁面底部的元素，如頁腳。