首頁 >web前端 >css教學 >css清除浮動的方法有哪些？ css浮動清除的四種方法介紹

css清除浮動的方法有哪些？ css浮動清除的四種方法介紹

不言原創: 2018-09-14 13:37:443208瀏覽

css清除浮動是在css佈局中經常看到的，那麼css中該如何清除浮動呢？這篇文章將為大家介紹關於css清除浮動的方法，以及簡單介紹為什麼要使用css浮動。

我們上篇文章css浮動是什麼意思？ css為什麼要清除浮動？中已經說到使用css浮動是因為在css中一些元素是塊級元素，他們會自動啟用新的一行，還有另一種內聯元素也就是行內元素，它們會與之前的內容保持顯示在「一行」；但是有時候我們需要改變這種佈局方式，這就需要利用css浮動來實現。但是當出現「高度塌陷」時就會需要清除浮動。那麼，css清除浮動的方法有哪些呢？

下面我們就來看看css清除浮動的四種方法介紹。

css清除浮動的方法一：

使用帶有clear屬性的空元素

在浮動元素後面使用一個空元素如a1b9f5956cb1dd834e31c3b34b29c1aa16b28748ea4df4d9c2150843fecfba68，並賦予CSS.clear{clear:both;}屬性即可清理浮動。亦可使用1e83b39052d3760a636088da66f8a446或9e9608c45e9340a126bcb009bcb97e71來進行清理。

.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浮動清除的四種方法介紹

相關文章