css中的浮動與三種清除浮動的方法

說到浮動之前，先說一下CSS中margin屬性的兩種特殊現象

1， 外邊距的合併現象：

如果兩個div上下排序，給上面一個div設置margin-bottom，給下麵一個div設置margin-top，那麼兩個margin會發生合併現象，合併以後的值較大的那個。

 對於這種現象一般不用處理。

2，margin塌陷現象：

如果一個大盒子中包含一個小盒子給小盒子設置margin-top大盒子會一起向下平移。

解決方案：

1.0給大盒子加一個邊框border屬性。

2.0給大盒子設置一個overflow屬性。

3.0使用浮動。

補充：overflow的常用屬性如下：

浮動

浮動是css中的一個重點，為什麼要使用浮動？

是為瞭解決一行中顯示多個盒子的問題。

float：left；      float ：right；

浮動有三個特點：

1，脫離標準流，不占位置。

2，會改變元素的預設顯示方式display為block塊級元素。

3， 浮動的元素只會覆蓋後邊的塊級元素，不影響前邊的塊級元素。

 什麼是標準流？

就是瀏覽器預設擺放盒子的標準。

標準流的特點：

1，塊級元素從上到下，獨占一行。

2，行內元素，行內塊級元素從左到右在一行中顯示。

3，占位置。

浮動的影響以及清除浮動的三種辦法

浮動對頁面的影響：

如果一個父盒子中有一個子盒子，並且父盒子沒有設置高，子盒子在父盒子中進行了浮動，那麼將來父盒子的高度為0.由於父盒子的高度為0，下麵的元素會自動補位，所以這個時候要進行浮動的清除。

Clear：both

1，使用額外標簽法：

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

.clearfix{

                    clear: both;

           }

<div class="clearfix"></div>

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

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

註意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標簽。

2，使用overflow屬性來清除浮動：

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

overflow: hidden;

3，使用偽元素來清除浮動：

.clearfix:after {

                    content: "";//添加內容為空

                    height: 0;//內容高度為0

                    line-height: 0;//內容文本的高度為0

                    display: block;//將文本設置為塊級元素

                    clear: both;//清除浮動

                    visibility: hidden;//將元素隱藏

           }

           .clearfix {

                    zoom: 1;/*為了相容ie6*/

           }