清除浮動

作項目過程當中，float佈局讓頁面模塊顯得so easy，那麼問題來了，float後面的元素會佔用浮動元素下部空間，致使佈局混亂，顯然不是咱們想要的裝X效果。在這裏總結了幾種清除浮動的方法：

方法一：

最後一個子元素的style設置爲clear：both，至關於這樣，

<style>
     .clear{clear:both;}    
</style>
<ul>
　　<li></li>
　　<li></li>
　　<li class=' clear'></li>
</ul>

這個方法不知道是否是本身沒有用到妙處，自認爲很差用。

方法二：

在父元素div上添加overflow：auto；zoom：1；

• overflow屬性共有三個屬性值：hidden,auto,visible。咱們能夠使用hiddent和auto值來清除浮動，但切記不能使用visible值，這個值沒法達到清除浮動效果，其區別在於auto對seo比較友好，另個hidden對seo不是太友好。

Zoom是在處理兼容性問題。

方法三：

：after，做用於浮動元素的父親

.clearfix {
  zoom: 1; 
}
.clearfix :after{
    clear: both;
    content: '';
    display: block;
    visibility: hidden;
  }

 

其中clear:both;指清除全部浮動；content: '.'; display:block;對於FF/chrome/opera/IE8不能缺乏，其中content（）能夠取值也能夠爲空。visibility:hidden;的做用是容許瀏覽器渲染它，可是不顯示出來，這樣才能實現清除浮動。