. 前言

CSS世界中的float屬性是一個年代非常久遠的屬性。雖然最初創造浮動并不是為了用于頁面布局，但它在布局方面表現得很出色。然而為了理解浮動，我們首先必須牢記它的設計初衷。Web誕生之初，帶寬就那么一點點，我們能夠做到的也只是展示文字以及零星圖片而已，怎么可能浮動設計的目的就是為了實現各種磚頭式的復雜布局呢？那個年代復雜布局都是用<table>實現的。既然這樣，那float屬性設計的目的究竟是什么呢？

2 浮動的本質

很簡單，一句話：浮動的本質就是為了實現文字環繞效果。而這種文字環繞，主要指的就是文字環繞圖片顯示的效果。所以，大家應該也多少對為什么老IE瀏覽器與浮動相關的bug一火車都裝不下有些了解了吧！人家的功能本來就很單純，只是讓文字可以繞著圖片跑，你偏要各種布局，結果撐不住了吧！

所以說：浮動是魔鬼，少砌磚頭、少浮動，要更多地去挖掘CSS世界本身的“流動性”和“自適應性”，以構建能夠適用于各種環境的高質量的網頁布局。好的網頁應該如同好的建筑。傳統的樓房是典型的“剛”式結構，磚頭加樓板，問題不言而喻，一個小小的地震可能就被夷為平地；而好的樓房應該是有“柔”在其中，也就是高質量的鋼筋結構，當地震導致房屋搖晃的時候，可以通過鋼筋的“柔性”卸力而保障整體結構的穩固。臺風襲來，很少見到說柔弱的柳樹被吹倒，反而會經常看到堅固的電線桿被風吹倒的消息，道理其實也類似。

3 浮動的特性

浮動有三個關鍵字可以選擇，left為向左浮動，right為向右浮動，none為不浮動。無論是行內元素（inline）還是塊級元素（block），設置浮動后都會變成塊級元素。但表現得卻更像行內塊元素（inline-block），因為在沒有明確寬度的時候，寬度會隨著內容自適應，而不是占據一行。

過去，浮動的行為經常受到瀏覽器bug的干擾，特別是在IE6和IE7中。幸虧這些瀏覽器幾乎已經淡出市場了，我們不必再擔心那些bug了。現在我們可以保證各種瀏覽器對浮動的處理是一致的。但是浮動仍有一些行為會讓你措手不及。這些并不是bug，而是因為浮動嚴格遵循了標準。讓我們來看看浮動如何工作，以及怎樣調整浮動的行為來實現理想的布局。

float都有哪些有意思的特性呢？具體如下：

• 包裹性

所謂“包裹性”，由“包裹”和“自適應性”兩部分組成。包裹假設浮動元素父元素寬度180px，浮動元素子元素是一個120px寬度的圖片，則此時浮動元素寬度表現為“包裹”，就是里面圖片的寬度120px，代碼如下：

.div { width: 180px; }
.float { float: left; }
.float img { width: 120px; }
<div class="div"> 　
    <div class="float">　　
        <img src="float.jpg">　 
    </div>
</div>

自適應性，如果浮動元素的子元素不只是一張120px寬度的圖片，還有一大波普通的文字，例如：

<div class="father">
    <div class="float">　　 
        <img src="float.jpg">大家好，我是碼農洞見。　
    </div>
</div>

則此時浮動元素寬度就自適應父元素的180px寬度，最終的寬度表現也是180px。

• 塊狀化并格式化上下文

塊狀化的意思是，元素一旦float的屬性值不為none，則其display計算值就是block或者table。

• 破壞文檔流

float通過破壞正常CSS流實現CSS環繞，帶來了煩人的“高度塌陷”的問題，然而，凡事都具有兩面性，只要了解透徹，說不定就可以變廢為寶、化腐朽為神奇。例如。我們可以利用float破壞CSS正常流的特性，實現兩欄或多欄的自適應布局。

4 清除浮動

浮動會影響周圍元素，并且還會引發很多意想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。clear屬性語法如下：

clear: none | left | right | both

在實際開發中，我們幾乎不會使用“clear:left”或“clear:right”來單獨清除左浮動或右浮動，往往都是直截了當地使用“clear:both”來把所有浮動清除，既簡單又省事。也就是說，我們只需要記住“clear:both”就可以了。

5 總結

通過閱讀本文我們了解到浮動的設計初衷是讓文字圍繞一個元素排列，但有時這種效果并不是我們想要的。使用清除浮動來包含浮動元素。所謂生生相克，既然有破壞，就有保護其他元素不被破壞的屬性。總之，只有深入理解浮動的工作原理，勤加練習才有可能避開常見的陷阱。達到選擇合適的工具來實現想要的效果。

6 最后的最后

為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！

天給大家帶來了四個線條進行環繞的加載中的效果，我放大了給你們看看，但是你們可以看到，每個線條的旋轉動作是一個圓形。

下面是代碼區域，我使用的是vivo試圖容器，里面包含了第二個試圖容器，里面有五個vivo試圖容器，前面這四個代表著四根線條，線條下面是文字。主要的是css代碼區域，我使用的是開發工具是s plus x，是開發uniap的。

先給大家解釋一下代碼部分。

·首先是第一個vivo式圖容器，使用彈性布局集中對齊，頂部距離進行相反像素的設置。

·第二個又是圖中簽，也是進行絕對定位，集中對齊相對定位等。

·下面就是h三，文字是白色，大家可以看到知道。

·這是第一個線條，設置了一個寬度、高度、邊框、透明度、圓角、絕對定位。主要是第一根線條的動作是個動畫，進行了應用旋轉動畫，無限循環。邊框顏色為了粉色，大家可以看到粉色，因為為什么這么細？大家可以看到因為在防木人狀態下設置了一個一的邊框，線條的寬度是一，所以是細的。

·第二個就是第一個線條動畫，它引用是哪個動畫？就是下面設置一個旋轉角度和結束的旋轉角度形成一個圓形，從五十到一百一，再從五十到四百七，大家可以看一下形成這么個動畫。

·下面第二根線條、第三根線條、第四根線條基本上都是一樣的動畫，所以大家只需要把第一根線條的寫法知道就行了。

·下面的其實位置的變化而已和顏色大家可以看到，其他地方基本上沒有太多的區別，就是美國旋轉的角度是不一樣的。第一個旋轉角度是四百七，第二個是三百八，然后是九十，然后是六百三，就這不一樣，價格方都是一樣的。

感興趣的同學可以找我嘮嗑進行獲取元代碼，進行二十四的編寫也可以，也可以自己去手動去學。

喜歡的可以點贊收藏一下，本期就講到這。