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的經常使用屬性以下：

 

visible	：默認值。內容不會被修剪，會呈如今元素框以外。
Hidden：	內容會被修剪，而且其他內容是不可見的。
Scroll：	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
Auto：	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。

 

 

浮動

浮動是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*/

           }