準備基礎代碼
浮動的性質比較複雜，這裡先製作一個基礎的頁面，代碼如下。後面一系列的實驗將基於下面的代碼為基礎，並根據不同的知識點添加不同的新代碼。
<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">body { margin:15px; font-family:Arial; font-size:12px;}.father { background-color:#ffff99; border:1px solid #111111; padding:5px; }.father p { padding:10px; margin:15px; border:1px dashed #111111; background-color:#90baff;}.father p { border:1px dashed #111111; background-color:#ff90ba;} .son1 {/* 這裡設定son1的浮動方式*/}.son2 {/* 這裡設定son1的浮動方式*/}.son3 {/* 這裡設定son1的浮動方式*/}</style></head><body> <p class="father"> <p class="son1">Box-1</p> <p class="son2">Box-2</p> <p class="son3">Box-3</p> <p>這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字，這裡是浮動框外圍的文字.</p> </p></body></html>
上面的代碼定義了4個<p>塊，其中的一個父塊，另外3個是它的子塊。為了便於觀察，將各個塊都加上了邊框以及背景顏色，並且讓<body>標記以及各個p之間有一定的margin值。如果3個子p都沒有任何浮動設定，就為標準流中的盒子狀態。在父盒子中，4個盒子各自向右伸展，豎直方向依次排列，如。
下面開始在這個基礎上做實驗，通過一些列的實驗，就可以充分體會到浮動盒子具有哪些性質了。
實驗一：設定第一個浮動的p
.son1 { float: left; }
效果如，可以看到標準流中的Box-2的文字在圍繞著Box-1排列，而此時Box-1的寬度不再伸展，而是能容納下內容的最小寬度。與此同時，由於Box-1脫離了標準流，而標準流中的Box-2會頂到原來Box-1的位置，因此Box-2的左邊框與Box-1的左邊框重合。
實驗二：設定第二個浮動的p
繼續將Box-2的float屬性設定為left，此時可以看到Box-2也變為根據內容確定寬度，並使Box-3的文字圍繞Box-2排列。從中可以清晰的看出，Box-3的左邊框仍在Box-1左邊框下面，否則Box-1和Box-2之間的空白不會是深色，這個深色實際上就是Box-3的背景色，Box-1和Box-2之間的空白是由二者的margin構成的。
實驗三：設定第三個浮動的p
接下來，我們把Box-3也設定為向左浮動，此時從中可以清楚的看到文字所在的盒子的範圍，以及文字會圍繞浮動的盒子排列。
實驗四：改變浮動方向
將Box-3改為向右浮動，即float:right。此時效果如。
可以看到Box-3移動到了最右端，文欄位落盒子的範圍沒有改變，但文字卻夾在了Box-2和Box-3之間。此時，如果把瀏覽器視窗慢慢調整變窄，瀏覽器視窗就無法在一行中容納Box-1到Box-3，Box-3會被擠到下一行中，但仍然保持向右浮動，這時文字會自動布滿空間。
實驗五：再次改變浮動的方向
將Box-2改為向右浮動，Box-3改為向左浮動。從可以看出布局沒有變化，只是Box-2和Box-3交換了位置。
現在，再次回到實驗中，把瀏覽器視窗慢慢變窄，當瀏覽器視窗無法在一行中容納Box-1到Box-3時，和上一個實驗一樣會有一個Box被擠到下一個。那麼這次被擠到下一行的是哪一個呢？答案是在HTML中寫在後面的，也就是Box-3會被擠到下一行中，但仍然保持向左浮動，會到下一行的左端，這時文字仍然會自動排文，如。
實驗六：全部向左移動
下面把3個Box都設定為向左浮動，然後再在Box-1中增加一行，使它的高度比原來高一些，如所示。
那麼請想一想，如果繼續把瀏覽器的視窗變窄，結果會如何呢？Box-3會被擠到下一行，那麼它會在Box-1的下面，還是Box-2的下面呢？答案如。
Box-3被擠到下一行並向左移動，發現Box-1比Box-2高出一塊兒，這樣Box-3就會被卡住，進而停留在Box-2的下面。說道最後，需要非常注意的是，如果某個盒子被設定為float，那麼它將脫離標準流，其後面的標準流中的盒子將不再受它影響。
實驗七：使用clear屬性清除浮動的影響
以使文字的左右兩側同時圍繞浮動的盒子。首先將Box-1到Box-2的浮動都改為float:left，而Box-3的浮動為float:right，之後再將Box-3的內容修改為：
<p class="son3"> Box-3<br> Box-3<br> Box-3<br> Box-3</p>
效果如：
如果不希望文字圍繞浮動的盒子，又該如何呢？此時對圍繞文字所在標籤<p>的樣式進行如下修改後，從下面的中可以看出，段落的上邊界向下移動，直到文字不受左邊的兩個盒子影響位置，但仍然受到Box-3的影響。
.father p { border:1px dashed #111111; background-color:#ff90ba; clear:left;}
接著，將clear屬性設定為right，將看到如下效果。由於Box-3比較高，因此清除了右邊的影響，自然左邊也就不會受到影響了。還有說明的是可以將clear屬性設定為both，從直接消除左右兩邊浮動盒子的影響。
實驗八：擴充盒子的高度
關於clear的應用，這裡再給出一個例子，將文字所在的段落<p>標籤刪除，這時在父p裡面只有3個浮動的盒子，它們都不在標準流中，這時瀏覽器的顯示效果如下：
可以看到，文欄位落被刪除以後，父p的範圍縮成一條，是由padding和border構成的，也就是說，一個p的範圍是由它裡面的標準流內容決定的，與裡面的浮動內容無關。下面將介紹一種方法以使父p的範圍能夠包含3個浮動的子p，見如下修改後的HTML代碼和與之對應的。
<p class="father"> <p class="son1">Box-1<br>Box-1</p> <p class="son2">Box-2</p> <p class="son3"> Box-3<br> Box-3<br> Box-3<br> Box-3 </p> <p style="clear:both;border:0;padding:0;margin:0;"></p></p>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
