css浮動的理解

浮動是指的是css的屬性float。對於設定了浮動的元素，在頁面效果上可以通俗的理解為「這個元素漂起來了（在水上）」，位置發生變化，不按html**中排列。從定義上理解，即該元素脫離了文件流（常規流）。

以下是mdn web docs中關於浮動的描述：

float css屬性指定乙個元素應沿其容器的左側或右側放置，允許文字和內聯元素環繞它。該元素從網頁的正常流動中移除，儘管仍然保持部分的流動性（與絕對定位相反）。

a在容器中是塊級元素，佔據一整行的位置（父級的全部寬度），後續的文字排列在其下方。

給a新增上float: left;，後續的文字緊跟a排列。

從上面的例子直觀的了解了浮動後，我們來仔細看看，浮動對於布局的影響。

當兄弟元素是塊級元素，浮動元素不會影響其布局。

塊a浮動後，塊b仍然佔據一整行。視覺上，即塊a浮到了塊b的上一層。

當兄弟元素是行內元素，它的布局會收到浮動元素的影響。

將「float css」放在span標籤中，發現其位置和後續的文字一樣，被浮動的塊a「頂開了」。

當父級元素是行內元素，浮動效果如下：

產生了和兄弟行內元素一樣的效果。

所以，在使用浮動的時候，父級元素一般不要使用行內元素，避免造成不必要的麻煩。

當父級元素是塊級元素。我們先看沒有浮動的情況：

對比加了浮動之後，

很明顯的能發現，浮動元素對於父級最大的影響在於，不能「撐開」父級元素。

對於多個浮動元素（浮動方向一致），在布局上就是單純的按照元素在html**中的順序依次擺放。這裡要說的是，在擺放中的一些規則。

塊a、b和c同為向左浮動的元素，它們橫向依次排列。當我們嘗試增加塊c的寬度到超過父級的限制時，塊c就挪到了塊a、b的下方。可以簡單的理解為，a、b所在的「第一行」已經放不下c了，所以把c靠著左邊（浮動方向）放到「下一行」。可以把這個規則略微粗暴的歸納為：換行。

這裡將的「行」的概念並不是真正指一整行的空間，是個抽象概念。

另一種情況，我們不增加c的寬度，而是在塊c之後加上塊d。

這就會很奇怪，根據上面的歸納，塊d不該放到「下一行」嗎？

所以，另一條規則就是：上移。但是，僅僅是單純的上移是不準確的，我們看下面的情況：

可以看到，雖然塊a下方仍有控制項，但是塊d不會上移去填補這部分空白，並且，塊d始終是處於塊c的下方的，即塊d的頂部始終不超過塊c的底邊。

對於上移規則的限制，可以說不超過前乙個浮動元素

綜上，浮動元素的擺放規則可總結為：

用浮動來實現布局，比如，商品的展示頁面，

側導航欄等等。

總的來說，浮動的使用是為了改變元素的位置（其實更貼切來說應該是順序），使其按照我們所想的擺放在頁面上，因此浮動廣泛用於頁面的布局之上。在css新加入flex（彈性）布局之後，由於便於操作，在實現布局上會選擇flex來實現，但浮動運用依舊廣泛。具體就要看我們在開發過程中的需求和自己的選擇了。