浮動的介紹

不知道大家是否和我有同樣的一個感覺，每當拿起一篇雜誌文章，總能發現左邊或右邊有圖片，文字流暢地圍著圖片，這就是列印世界中看到的浮動：

在Web的世界中，css的float設計初衷也是用來處理文字圍繞圖片排版的，就像在雜誌佈局中一樣。礙於當時Web佈局可用方案的侷限性，聰明的csser才把float用於Web的佈局當中，這一用就用了很多年，直到Flexbox的成熟才慢慢的看不到float用於Web佈局的影子。但這並不能表明，浮動就將退出歷史的舞臺。因為在Web中處理文字圍繞圖片的排版始終是離不開浮動的。當然，如果你願意的話，在什麼時候你都還可以使用浮動來完成Web的佈局，只不過在某些場景中使用浮動佈局會有一定的缺陷性。

什麼是浮動

既然是要聊浮動，那麼我們從她的定義開如聊起吧。W3C是這樣對浮動定義的：

浮動是在當前行上向左或向右移動框（盒子）。浮動最有趣的特性是內容可能沿著它的側流動。內容沿著左浮動框的右側向下流動，並沿著右浮動框的左側向下流動。

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com

浮動的行為和本質

在探討浮動的行為和本質之前，有幾個概念先簡單的介紹一下：

• 文件流：在html中文件流即為元素從上至下排列的順序或自左向右的排列
• 脫離文件流：元素從正常的排列順序中被抽離
• 最左邊/最右邊：移動到父元素最左和最右是指元素往左或往右移動，直到碰到另一個浮支元素或父元素內容區的邊界

在Web中，html文件會受到一些規則約束，特別是正常的文件流。在正常的文件流中，每個塊級元素（比如div、p等）垂直地堆疊在一起，從檢視的頂部向下堆疊。但元素要是使用了浮動特性，元素會脫離文件流。

咱們可以這樣來理解，把HTML文件當作一張白紙。當我們在一個元素上運用浮動時，就像是在該元素上添加了另一張紙：

浮動元素將會浮動到新圖層上：

由於它不再是原始層（正常文件流）的一部分，下面的塊元素會向上移動（非塊元素表現行為有所差異），就像浮動元素從來沒有在文件中存在過一樣：

重要的是要理解浮動元素不再完全包含在宣告它的CSS框中。它實際上浮在其他HTML元素之上。

事實上，浮動元素首先根據常規流佈局，然後從常規流中取出並將其移到父元素的最右側或最左側（取決於應用浮動的哪個值，後續會介紹）。也就是說，如果父元素中有足夠的空間容納每個浮動元素，那麼之約們就會從一個堆疊到另一個相鄰。

剛才提到一個問題：“父元素中有足夠的空間容納每個浮動元素”。那麼如果沒有足夠的之空間容納呢？

在浮動中，如果容器沒有足夠空間容納浮動元素時，那麼浮動元素將會在新的一行並排，如上圖右側的圖所示。

事實上，浮動的本質是浮動元素自身就是一個帶有方位的display： inline-block屬性。某種意義上的作用就是包裹，但浮動又無法完全等同display:inline-block，其中原因之一就是浮動的方向性：

display:inline-block