<div> 標簽是 HTML 中常用的塊級元素之一，它用于創建一個容器，可以用來包裹其他 HTML 元素。在某些情況下，我們可能需要將多個 <div> 元素放在同一行上進行布局，或者需要在一個容器內放置多個 <div> 元素。當這些 <div> 元素被設置為浮動時，它們將會脫離正常的文檔流，并且可能導致父元素的高度塌陷。為了解決這個問題，我們可以通過一些技巧去除這個浮動效果，使父元素能夠正確地包裹住浮動的子元素。
下面，我們通過幾個代碼案例來詳細解釋如何去除浮動的問題。，我們創建一個父容器 <div> 并在其中嵌套三個子元素 <div>，并將這三個子元素設置為浮動。

<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

接下來，我們需要在 CSS 樣式表中添加一些代碼來處理這個浮動效果。我們可以使用偽類選擇器::after來在父容器的最后添加一個空元素，并用clear: both;來清除浮動。這樣，父容器將會正確地包裹住浮動的子元素。

.parent::after {
content: "";
display: table;
clear: both;
}

在第一個案例中，我們使用了偽類選擇器來清除浮動效果。這種方法適用于大多數情況下，但在某些情況下可能會有兼容性問題。因此，我們還可以使用另一種方法來去除浮動。

.parent {
overflow: auto;
}

在第二個案例中，我們將父容器的overflow屬性設置為auto。這樣，父容器將會自動包裹住浮動的子元素，并避免高度塌陷的問題。
來說，我們可以通過使用偽類選擇器和設置父容器的overflow屬性來去除浮動效果。這些方法都非常簡單易用，可以確保父元素正確地包裹住浮動的子元素，避免布局出現問題。