關於清除浮動的四種方法

浮動對頁面的影響：

　　　　若是一個父盒子中有一個子盒子，而且父盒子沒有設置高，子盒子在父盒子中進行了浮動，那麼未來父盒子的高度爲0.因爲父盒子的高度爲0，

　　　　下面的元素會自動補位，因此這個時候要進行浮動的清除。

關於清除浮動的方式:

 

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

　　　　.ovh{

　　　　　　overflow:hidden;

　　　　　}

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

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

 

　　方式二:使用額外標籤法

　　　　.clear{

　　　　　　clear:both;

　　　　　}

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

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

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

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

 

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

　　　　.clearfix:after{

　　　　　　content:"";//設置內容爲空

　　　　　　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;

            }

 

　　　　總結:第一種方法會將超出部分隱藏在某些時候咱們想清除浮動而且保留超出部分時作不到,第二種方法會增長許多沒必要要的標籤,

　　　　　　因此咱們儘可能使用第三種方法來清除浮動,爲何不選擇第四種方法呢?由於第四種是第三種的改良版雖然比較簡便,可是不

　　　　　　嚴謹!