css清除浮動是在css佈局中經常看到的，那麼css中該如何清除浮動呢？這篇文章將為大家介紹關於css清除浮動的方法，以及簡單介紹為什麼要使用css浮動。
我們上篇文章css浮動是什麼意思？ css為什麼要清除浮動？ 中已經說到使用css浮動是因為在css中一些元素是塊級元素，他們會自動啟用新的一行，還有另一種內聯元素也就是行內元素，它們會與之前的內容保持顯示在「一行」；但是有時候我們需要改變這種佈局方式，這就需要利用css浮動來實現。但是當出現「高度塌陷」時就會需要清除浮動。那麼，css清除浮動的方法有哪些呢？
下面我們就來看看css清除浮動的四種方法介紹。
css清除浮動的方法一：
使用帶有clear屬性的空元素
在浮動元素後面使用一個空元素如
，並賦予CSS.clear{clear:both;}屬性即可清理浮動。亦可使用
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>說明：
優點：簡單，程式碼少，瀏覽器相容性好。
缺點：需要增加大量無語意的html元素，程式碼不夠優雅，後期不容易維護。
css清除浮動的方法二：
使用CSS的overflow屬性
為浮動元素的容器新增overflow: hidden;或overflow:auto;可以清除浮動，另外在IE6 中還需要觸發hasLayout ，例如為父元素設定容器寬高或設定zoom:1。
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>說明：
在加入overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
優點：不存在結構和語意化問題，程式碼量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素； 04年POPO發現overflow:hidden會導致中鍵失效，這是我作為一個多標籤瀏覽控所不能接受的。所以還是不要使用.
css清除浮動的方法三：
#使用鄰接元素處理
什麼都不做，為浮動元素後面的元素加入clear屬性。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content{
clear:both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>css清除浮動的方法四：
使用CSS的:after偽元素
結合:after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之後最近的元素）和IEhack ，可以完美兼容當前主流的各大瀏覽器，這裡的IEhack 指的是觸發hasLayout。
在浮動元素的容器中加入一個clearfix的class，然後在這個class上加上一個:after偽元素實作元素末端加上一個看不見的塊元素（Block element）來清理浮動。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>說明：透過CSS偽元素在容器的內部元素最後加上了一個看不見的空格"020"或點"."，並且賦予clear屬性來清除浮動。要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class增加一條zoom:1;觸發haslayout。
最後：關於上述文章中一些屬性的具體內容可以參考css手冊。
相關推薦：
以上是css清除浮動的方法有哪些？ css浮動清除的四種方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
