<div 清理內容是前端開發中常用的一種技術，用于解決浮動元素引起的布局問題。當我們在HTML文件中使用了浮動來布局頁面時，可能會引起父元素高度塌陷等問題，這時就需要使用<div 清理內容>來解決這些問題。
<div 清理內容>的原理是通過在布局代碼中插入一段特殊的代碼，將其放在浮動元素后面的盒子中，以此來解決父元素高度塌陷的問題。這樣可以保證浮動元素正確地撐開父元素并顯示在正確的位置上。
下面是幾個常見的<div 清理內容>的代碼案例：
案例一：

HTML代碼：

<div class="wrapper">
<div class="float-left">浮動元素1</div>
<div class="float-right">浮動元素2</div>
<div class="clearfix"></div>
</div>

CSS代碼：

.float-left {
float: left;
}
<br>
.float-right {
float: right;
}
<br>
.clearfix::after {
content: "";
display: table;
clear: both;
}

在這個案例中，我們給浮動元素1和浮動元素2添加了float屬性來進行布局。然后通過在最后一個浮動元素后面插入一個空的<div>元素，并設置其樣式為clearfix來清理內容。這樣可以保證.wrapper元素正確地顯示高度，不再塌陷。
案例二：

HTML代碼：

<div class="wrapper">
<div class="float-left">浮動元素1</div>
<div class="float-right">浮動元素2</div>
<div class="clearfix"></div>
</div>

CSS代碼：

.float-left {
float: left;
}
<br>
.float-right {
float: right;
}
<br>
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
<br>
.clearfix::after {
clear: both;
}

在這個案例中，我們使用了另一種清理內容的技巧。通過在clearfix樣式中同時插入before和after偽元素，并設置其content屬性為空，display屬性為table，可以達到和設置clear屬性為both一樣的效果。
案例三：

HTML代碼：

<div class="wrapper">
<div class="float-left">浮動元素1</div>
<div class="float-right">浮動元素2</div>
<div class="clearfix"></div>
</div>

CSS代碼：

.float-left {
float: left;
}
<br>
.float-right {
float: right;
}
<br>
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
<br>
.clearfix:after {
clear: both;
}

在這個案例中，我們同樣使用了before和after偽元素來實現清理內容的效果。不同的是，在內容中添加了一個空格字符，達到和案例二中類似的效果。
來說，<div 清理內容>是一種常用的技術，在使用浮動布局時能夠解決高度塌陷的問題。通過在浮動元素后面插入空的<div>元素，并設置其樣式為clearfix來實現清理內容的效果。在實際使用中，還可以通過使用偽元素:before和:after來達到類似的效果，提高代碼的靈活性和可讀性。這些技術都是前端開發中常用的知識點，值得我們學習和掌握。