<div 局底是一種CSS布局技術，它可以讓一個元素位于父元素的底部。通過設置父元素的高度，使用flex布局和指定元素的margin-top屬性，div局底可以實現將元素置于父元素的底部，而無需使用絕對定位或其他復雜的布局技巧。

下面通過幾個代碼案例來詳細解釋說明div局底的使用方法。

案例一：

.container {
display: flex;
flex-direction: column;
height: 500px;
}
<br>
        .content {
margin-top: auto;
}

在這個案例中，我們有一個高度為500px的父容器（.container），里面包含一個子元素（.content）。通過設置display屬性為flex，并且指定flex-direction為column，父容器的子元素會按照垂直方向進行排列。

接著，通過設置.content元素的margin-top屬性為auto，它會自動占據父容器未被占據的空間，并且位于父容器的底部。這樣就實現了div局底的效果。

案例二：

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 500px;
}
<br>
        .content {
margin-top: auto;
}

與前一個案例類似，這個案例中，我們同樣使用了display: flex和flex-direction: column來設置父容器的布局。但是在這個案例中，我們通過設置justify-content屬性為space-between，子元素之間會均勻地分布在容器的垂直方向上。

然后，通過設置.content元素的margin-top屬性為auto，它會自動占據父容器未被占據的空間，并且位于父容器的底部。

案例三：

.container {
position: relative;
height: 500px;
}
<br>
        .content {
position: absolute;
bottom: 0;
width: 100%;
}

在這個案例中，我們使用了絕對定位來實現div局底的效果。，我們設置父容器的position為relative，這樣后續設置絕對定位的子元素將以該父容器作為參考。

然后，通過設置.content元素的position為absolute，并且設置bottom為0，該元素會固定在父容器的底部。

在這種方法中，父容器的高度不需要設置為固定值，可以根據內容的高度自動調整。

通過上述案例，我們可以看到div局底是一種實用的CSS布局技術，它可以簡化布局代碼，輕松實現將元素置于父元素的底部的效果。無論是通過flex布局還是絕對定位，都可以靈活地使用div局底來滿足不同布局需求。