清除浮動的方法

前言：

本文主要介紹清除浮動的4種風方法及利弊

浮動對頁面的影響：

若是一個父級塊元素中的子元素浮動，那麼全部浮動的子元素都脫離了文檔流，若是父元素沒法肯定高度，則其下面的兄弟元素會自動補位，形成視圖結構混亂，因此這個時候要進行清除浮動。

關於清除浮動的方式:

方式一:使用overflow屬性來清除浮動

.parent{
    overflow:hidden;
}

　　　　先找到浮動盒子的父元素，再在父元素中添加一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響.

　　　　注意：通常狀況下也不會使用這種方式，由於overflow:hidden有一個特色，離開了這個元素所在的區域之後會被隱藏（overflow:hidden會將超出的部分隱藏起來）.

方式二:使用額外標籤法

.clear{
    clear:both;
}

　　　　在浮動的盒子之下再放一個標籤，在這個標籤中使用clear:both，來清除浮動對頁面的影響.

　　　　　　a.內部標籤：會將這個浮動盒子的父盒子高度從新撐開.

　　　　　　b.外部標籤：會將這個浮動盒子的影響清除，可是不會撐開父盒子.

　　　　注意：通常狀況下不會使用這一種方式來清除浮動。由於這種清除浮動的方式會增長頁面的標籤，形成結構的混亂.

方法三:使用僞元素來清除浮動(after意思:後來,之後)

.clearfix:after{
    centent:"";//設置內容爲空
    height:0;//高度爲0
    line-height:0;//行高爲0
    display:block;//將文本轉爲塊級元素
    visibility:hidden;//將元素隱藏
    clear:both//清除浮動
}
.clearfix{
    zoom:1;爲了兼容IE
}

方法四:使用雙僞元素清除浮動

.clearfix:before,.clearfix:after {

content: "";    
display: block;    
clear: both;

}

.clearfix {

zoom: 1;

}

總結

第一種方法會將超出部分隱藏在某些時候咱們想清除浮動而且保留超出部分時作不到第二種方法會增長許多沒必要要的標籤推薦使用第三種方法來清除浮動第四種是第三種的改良版，雖然比較簡便,可是不嚴謹!