CSS是網頁設計中必不可少的一種技術，它可以實現網頁樣式的各種各樣的效果，其中包括設置高度浮動。下面就讓我們來看一下如何通過CSS來設置高度浮動。

浮動元素的基本原理：
1.浮動元素會脫離正常的文檔流，不再占據原先的空間。
2.浮動元素會嘗試取最小的寬度，以最大程度地利用可用的空間。
3.如果多個元素浮動在同一行，但是寬度總和超過了父元素的寬度，那么超出的部分會移到下一行。
設置高度浮動的CSS屬性：
1. float: left;或 float: right; 將元素向左或向右浮動。
2. margin-right: 10px; 或 margin-left: 10px; 指定相鄰元素的間距。
3. clear: left;、clear: right;或 clear: both; 清除浮動，使下面的內容不會再受到影響。
例如：
<div class="clearfix">
<div style="float:left;width:200px;height:100px;background-color:red;"></div>
<div style="float:right;width:200px;height:100px;background-color:blue;"></div>
</div>
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

如上所示的代碼就是設置高度浮動的典型應用，其中clearfix類使用了偽元素來清除浮動，以避免浮動元素對下面的內容產生影響。當然，CSS的高度浮動并不僅限于上述代碼，而是有很多不同的實現方式，我們可以根據實際需求來自由設置，以達到最佳的視覺效果。