CSS浮動 float,clear 通俗講解

很早以前就接觸過css，但對於浮動始終非常迷惑，可能是自身理解能力差，也可能是沒能遇到一篇通俗的教程。

前些天小菜終於搞懂了浮動的基本原理，迫不及待的分享給大家。

寫在前面的話：

由於css內容比較多，沒有精力從頭到尾講一遍，只能有針對性的講解。

如果讀者理解css盒子模型，但對於浮動不理解，那麼這篇文章可以幫助你。

本文僅僅是入門教程，不當之處請諒解！

本文以div元素布局為例。

教程開始：

首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。如下圖：

可以看出，即使div1的寬度很小，頁面中一行可

以容下div1和div2，div2也不會排在div1後邊，因

為div元素是獨佔一行的。

注意，以上這些理論，是指標準流中的div。

無論多麼複雜的布局，其基本出發點均是：「如何在一行顯示多個div元素」。

顯然標準流已經無法滿足需求，這就要用到浮動。 

浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是乙個層次。

例如，假設上圖中的div2浮動，那麼它將脫離標準流，但div1、div3、div4仍然在標準流當中，所以div3會自動向上移動，佔據div2的位置，重新組成乙個流。如圖：

從圖中可以看出，由於對div2設定浮動，因此它不再屬於標準流，div3自動上移頂替div2的位置，div1、div3、div4依次排列，成為乙個新的流。

又因為浮動是漂浮在標準流之上的

，因此div2擋住了一部分div3，div3看起來變「矮」了。

這裡div2用的是左浮動(float:left;)，可以理解為漂浮起來後靠左排列，右浮動(float:right;)當然就是靠右排列。這裡的靠左、靠右是說頁面的左、右邊緣。

如果我們把div2採用右浮動，會是如下效果：

此時div2靠頁面右邊緣排列，不再遮擋div3，讀者可以清晰的看到上面所講的div1、div3、div4組成的流。

目前為止我們只浮動了乙個div元素，多個呢？下面我們把div2和div3都加上左浮動，效果如圖：

同理，由於div2、div3浮動，它們不再屬於標準流，因此div4會自動上移，與div1組成乙個「新」標準流，而浮動是漂浮在標準流之上，因此div2又擋住了div4。

當同時對div2、div3設定浮動之後，div3會跟隨在div2之後，不知道讀者有沒有發現，一直到現在，div2在每個例子中都是浮動的，但並沒有跟隨到div1之後。因此，我們可以得出乙個重要結論：

假如某個div元素a是浮動的，如果a元素上乙個元素也是浮動的，那麼a元素會跟隨在上乙個元素的後邊(如果一行放不下這兩個元素，那麼a元素會被擠到下一行)；如果a元素上乙個元素是標準流中的元素，那麼a的相對垂直位置不會改變，也就是說a的頂部總是和上乙個元素的底部對齊。

div的順序是html**中div的順序決定的。靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。

CSS浮動 float,clear 通俗講解

很早以前就接觸過css，但對於浮動始終非常迷惑，可能是自身理解能力差，也可能是沒能遇到一篇通俗的教程。前些天小菜終於搞懂了浮動的基本原理，迫不及待的分享給大家。寫在前面的話 由於css內容比較多，小菜沒有精力從頭到尾講一遍，只能有針對性的講解。如果讀者理解css盒子模型，但對於浮動不理解，那麼這篇文...

CSS浮動 float,clear 通俗講解

前段時間在網上看到一篇文章 css浮動 float,clear 通俗講解 對我這種剛入門的菜鳥來說，淺顯易懂。故 過來。很早以前就接觸過css，但對於浮動始終非常迷惑，可能是自身理解能力差，也可能是沒能遇到一篇通俗的教程。前些天小菜終於搞懂了浮動的基本原理，迫不及待的分享給大家。寫在前面的話 由於c...

css浮動 float clear 使用講解

首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。如下圖 可以看出，即使div1的pkaywg寬度很小，頁面中一行pkaywg可以容下div1和div2，div2也不會排在div1後邊，因為div元素是獨佔一行的。注意，以上這些理論，是指標準流中的div。無論多麼複雜的...