<div>元素是HTML中最常用的元素之一，用于創建和定義某個區域的塊級元素。在CSS中，可以使用各種屬性和值來控制<div>元素的樣式和布局。其中一種常見的需求是將<div>元素居左，即讓<div>元素在其父元素的左邊緣顯示。
<div>元素的默認布局是塊級元素，會占據整個父容器的寬度，默認情況下會將其內容放置在新行的開頭。為了實現<div>元素居左的效果，可以使用CSS的"float"屬性，將其值設置為"left"。這樣一來，<div>元素將會向左浮動，盡可能地靠近左側的邊緣。
下面以幾個代碼案例來詳細解釋和說明如何使用CSS將<div>元素居左。
第一個案例中，我們有一個HTML結構如下：

<div class="container">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>

其中，有一個名為"container"的<div>元素，其下包含兩個子元素，分別是名為"left"和"right"的<div>元素。
接下來，我們可以使用CSS代碼來實現"left"區塊居左顯示的效果：

.container {
width: 400px;
}
<br>
.left {
float: left;
width: 200px;
}

，我們給"container"設置了一個固定寬度，這樣可以讓其內部的子元素占據指定寬度的空間。然后，我們給"left"設置了"float: left"，將其浮動到左側。此外，還可以設置"left"的寬度，以確定其在父容器中的占比。
在第二個案例中，我們有以下HTML結構：

<div class="container">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
<div class="clear"></div>
</div>

與第一個案例相比，這里多了一個名為"clear"的<div>元素。這是為了解決一種常見的布局問題，即當<div>元素浮動后，可能會導致其父容器塌陷，使得父容器無法正常包含這些浮動元素。
為了解決這個問題，我們可以在父容器的末尾添加一個空的<div>元素，并給其設置"clear: both"的樣式。這樣一來，該元素將會被強制換行，并且清除前面的浮動效果。
下面是樣式的代碼實現：

.container {
width: 400px;
}
<br>
.left {
float: left;
width: 200px;
}
<br>
.clear {
clear: both;
}

通過添加一個名為"clear"的<div>元素，并設置其清除浮動的樣式，我們解決了父容器塌陷的問題。<div>元素現在可以居左顯示，并正確包含其浮動子元素。
以上是兩個案例來詳細解釋和說明如何使用CSS將<div>元素居左的方法。通過使用"float: left"屬性來讓<div>元素浮動到左側，并通過適當設置寬度和清除浮動，可以實現<div>元素在頁面中居左顯示。CSS的靈活性使我們能夠根據實際需求來進行調整，從而實現各種不同的布局效果。