CSS技巧之清除浮動（Clearfix）
浮動是 CSS 中一項非常重要的佈局技術，在網頁的排版中廣泛應用。但同時也會導致一些問題，例如父元素高度塌陷等。清除浮動（Clearfix）技術就是為了解決這個問題而產生的，本文將介紹清除浮動的幾種常用方法。
一、浮動的問題
首先，我們來理解一下浮動的問題。
HTML：
<div class="parent"> <div class="left">左侧区域</div> <div class="right">右侧区域</div> </div>
CSS：
.left {
float: left;
width: 300px;
height: 100px;
background-color: #ccc;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #eee;
}效果如下圖所示：
可以看到，左側區域和右側區域都運用了浮動技術。但如果，我們希望父元素（即.parent）的高度與子元素的高度相等，那麼會出現以下的問題：
可以看到，父元素高度明顯縮小了。這是因為子元素使用了浮動，所以它們都脫離了文檔流，父元素沒有包含它們，導致計算高度的時候不把它們計算在內。
二、清除浮動的幾種方法
為了解決這個問題，我們需要透過清除浮動來讓父元素重新計算高度。以下介紹一些常用的清除浮動方法：
1、使用空標籤清除浮動
這是一個非常常見的方法，它利用空標籤的特性來清除浮動，程式碼如下：
HTML：
<div class="parent"> <div class="left">左侧区域</div> <div class="right">右侧区域</div> <div style="clear: both;"></div> </div>
CSS：
.left {
float: left;
width: 300px;
height: 100px;
background-color: #ccc;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #eee;
}在父元素的最後加上一個空標籤，並設定clear:both，表示該標籤清除浮動。
但這種方法比較麻煩，需要加上一個無意義的標籤，不利於程式碼的維護。
2、使用 ::after 偽元素清除浮動
與第一種方法類似，使用 ::after 偽元素來清除浮動。由於 ::after 是一個塊元素，可以在浮動元素後面添加一個塊級元素來清除浮動。
HTML：
<div class="parent"> <div class="left">左侧区域</div> <div class="right">右侧区域</div> </div>
CSS：
.left {
float: left;
width: 300px;
height: 100px;
background-color: #ccc;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #eee;
}
.parent::after {
content: "";
display: block;
clear: both;
}在父元素上使用::after 偽元素，並設定content:"";display:block;clear :both;，表示在父元素之後加入一個區塊級元素，清除浮動。
這種方法只需要在父元素上添加 CSS 樣式，不需要添加多餘的 HTML 標籤，非常方便。
3、使用BFC 清除浮動
BFC（Block Formatting Context，區塊級格式化上下文）是CSS 中的一個概念，它可以讓元素在一個獨立的渲染區域內進行渲染，可以清除浮動，實作方式如下：
HTML：
<div class="parent"> <div class="left">左侧区域</div> <div class="right">右侧区域</div> </div>
CSS：
.left {
float: left;
width: 300px;
height: 100px;
background-color: #ccc;
}
.right {
float: right;
width: 300px;
height: 200px;
background-color: #eee;
}
.parent {
overflow: hidden;
}在父元素上設定overflow:hidden
以上是css的清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！
