當我們在布局中使用了浮動（float）屬性時，往往會遇到父級元素因為浮動導致高度塌陷（collapsed）的問題。比如下面這個例子：

.parent {
width: 600px;
border: 1px solid #333;
}
.child {
width: 300px;
height: 200px;
float: left;
border: 1px solid #f00;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>

在這個例子中，父級元素.parent因為子元素.child的浮動而導致高度塌陷，導致邊框也跟著塌陷了。這顯然不是我們想要的效果。

那么如何解決這個問題呢？我們可以使用清除浮動（clear-float）的方法，在父級元素中添加一個空元素并設置清除浮動的屬性來解決塌陷問題。代碼如下：

.clearfix::after {
content: "";
display: block;
clear: both;
}
<div class="parent clearfix">
<div class="child"></div>
<div class="child"></div>
<div class="clearfix"></div>
</div>

這個方法的實現原理是在父級元素的末尾添加一個空元素，并設置::after偽元素的清除浮動屬性，把浮動元素.child強制放置在父級元素內，不會導致高度塌陷的問題。

這樣就可以解決浮動撐開父級的問題了，而且這個方法也是比較標準和普遍使用的一種方法。