首頁 >web前端 >css教學 >CSS如何清除浮動？ css清除浮動的五種方法總結

CSS如何清除浮動？ css清除浮動的五種方法總結

不言原創: 2018-08-10 11:38:433300瀏覽

這篇文章要跟大家介紹的內容是關於CSS如何清除浮動？ css清除浮動的五種方法總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

方法一（使用空標籤帶clear屬性）

#標籤可以是div br　hr

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

優點：簡單，程式碼少，瀏覽器相容性好。

缺點：需要增加大量無語意的html元素，程式碼不夠優雅，後期不容易維護。

在浮動元素下加5394d62b37c0d1016baca90bf99fbfbf94b3e26ee717c64999d7867364b1b4a3 .clear{ height:0px;font-size:0;clear:both;}，但在ie6下，塊元素有最小高度，即當height<19px時，預設為19px

解法：font-size:0;或overflow:hidden; 在浮動元素下加

方法二（為浮動元素的父元素添加overflow屬性）解決了透過空標籤元素清除浮動而不得不增加無意程式碼的弊端。

使用該方法是只需在需要清除浮動的元素中定義CSS屬性：overflow:auto

overflow:auto;是讓高度自適應，zoom: 1;是為了相容IE6，也可以用height:1%;的方式解決，

注意：zoom不符合W3C標準。 overflow:hidden也可以實現。

<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

方法三：（為浮動的元素的容器添加浮動，即為父級添加float來清除浮動）

<div style="float: right;background-color: #1a1a1a;">
   <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
 
   </div>
   <div style="width: 500px;height: 200px;background-color: #8a6d3b">
 
   </div>
</div>

給浮動元素的容器也新增上浮動屬性即可清除內部浮動

缺點：會使其整體浮動，影響佈局，不建議使用。

方法四：（使用after偽物件清除浮動）

after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之後最近的元素）和IEhack ，可以完美兼容當前主流的各大瀏覽器，這裡的IEhack 指的是觸發hasLayout。

透過after偽元素實作元素末端加入一個看不見的區塊元素（Block element）清理浮動。

透過CSS偽元素在容器的內部元素最後加上了一個看不見的空格""或點"."，並且賦予clear屬性來清除浮動。要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class增加一條zoom:1;觸發haslayout。

after偽物件非IE瀏覽器支持，所以不影響IE/WIN瀏覽器。具體寫法可參考以下範例。使用中需注意以下幾點。

一、方法中必須為需要清除浮動元素的偽物件中設定height:0，否則該元素會比實際高出若干像素；

二、content屬性是必須的，但其值可以為空，討論該方法的時候content屬性的值設為"."，

<style type="text/css"> 
.listinfo:after{
      display:block;
      clear:both;
      content:"";  
      visibility:hidden;
      height:0;
} 
<ul class="listinfo">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

方法五：使用鄰接元素處理

什麼都不做，給浮動元素後面的元素添加clear屬性。

方法與新增一個空標籤類似，只是這裡用浮動元素緊鄰的元素

使用情況：

在網頁主要佈局時使用:after偽元素方法並作為主要清理浮動方式；

在小模組如ul裡使用overflow:hidden;（留意可能產生的隱藏溢出元素問題）;

如果本身就是浮動元素則可自動清除內部浮動，無需格外處理；

正文中使用鄰接元素清理之前的浮動。

使用相對完美的:after偽元素方法清理浮動，文檔結構更加清晰;

BUG修正：

（1）、雙倍邊距bug處理IE6 時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設定外邊距(margin)，會引發
雙倍邊距。

快速修正：給浮動設定 display:inline; 而且不用擔心，它仍然是區塊級元素。
（2）、3像素間距是指挨著浮動元素的文字會神奇的被踢出去3像素，好像浮動元素的周圍有一個奇怪的力場一樣。

快速修正：在受影響的文字上設定寬度或高度。
（3）、IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉。

快速修正：用父元素的底內補白(padding)代替。

CSS如何清除浮動？ css清除浮動的五種方法總結

相關文章