使用CSS的float屬性來實現頁面布局是我們常用的一種方式。而在使用float的過程中，會遇到一個問題，那就是如何讓float元素撐開其父級元素的高度。 為了解決這個問題，我們可以使用一些技巧和方法。 方法一：使用clear屬性 我們可以在父級元素的末尾添加一個空div元素，再使用CSS的clear屬性來清除float元素的影響，從而讓父級元素自動適應高度。 下面是示例代碼： ```

HTML 代碼：
CSS 代碼：
.parent {
position: relative;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear {
clear: both;
}

``` 方法二：使用overflow屬性 我們可以設置父級元素的overflow屬性為hidden或auto，這樣父級元素就可以自動適應其內部的float元素的高度了。 下面是示例代碼： ```

HTML 代碼：
CSS 代碼：
.parent {
overflow: hidden; /* 或者設置為auto */
}
.float-left {
float: left;
}
.float-right {
float: right;
}

``` 方法三：使用clearfix類 我們可以定義一個clearfix類來清除float元素的影響。該類的代碼如下： ```

.clearfix::after {
content: "";
display: block;
clear: both;
}
```
然后在父級元素中使用clearfix類即可。
下面是示例代碼：
```
HTML 代碼：
CSS 代碼：
.parent {
position: relative;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
```