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

說到浮動之前，先說CSS中margin#屬性的兩個特殊現象 

1，外側距的合併現象：

如果兩個p上下排序，給上面一個p設定margin-bottom，給下面一個p設定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;

   /p>

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

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

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

 

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

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

overflow: hidden;

 

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

.clearfix

:after

{

                    content: "";//新增內容為空#                           

line-height

: 0;//內容文字的高度為0

                    display: block;//將文字設定為oth;//清除浮動                   

visibility

: hidden;///將元素隱藏     ##                    zoom: 1;/*為了相容於ie6*/

           }

# 

 

#visible

#：#

	1
:預設值.內容不會被修剪，會呈現在元素框外。	Hidden
內容會被修剪，並且其餘內容是不可見的。
Scroll#：	內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。
Auto#：	如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。

以上是詳解css中的浮動與三種清除浮動的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！