1. 程式人生 > >常用清除浮動方式與瀏覽器相容

常用清除浮動方式與瀏覽器相容

 1、父級div定義height

 此種方法只適合固定height的使用,不存在瀏覽器相容問題。

2、:after/:before(推薦)
  .clearfix:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
   }

 此種方式是比較常用,可移植性高,但ie低版本不支援,設定.clearfix{zoom:1}可解決。

3、父元素overflow:hidden/overflow:auto

 父元素會自動檢查浮動元素高度,但此種方式有一定的弊端,會讓超出其區域的隱藏或者出現滑動條。

4、其它方式

 新增空標籤並設定clear:both;父元素設定浮動;(不推薦使用)