浮動，是如何實現頁面布局的呢？

它有哪些特質和使用方法？

今天，我們就用5分鐘的動畫短視頻來深入淺出地理解浮動~

動畫視頻：

果凍公開課：如何理解浮動布局？

文字解析：

網頁兒也能這么圖文并茂嗎？

假設這里有一個標題、一幅畫兒和一段文字

如果把這三個元素都設為塊級元素，那么看起來將是這樣的：

因為塊級元素的特點是：

可以設置寬和高，但它會獨占一行。

如果把后兩個個元素都設為行內元素，那么看起來則是這樣的：

因為行內元素的特點是：

可以多個元素手拉手站一行，擠不下時就新開一行繼續擠

但是不能設置寬和高，只能被內部的內容撐開，就像氣球一樣，需要在里面充入空氣才會拉伸開。

然而這樣的效果依舊不是很好，因為圖片作為行內元素和文字一樣手拉手站一起排隊

不過因為圖片的又高又胖把整個空間撐大了，但這樣并不會形成文字環繞的效果

所以應該怎么辦呢？

還好這個世界上聰明人很多，有人想到了一個點子，設計這么一個屬性：浮動

把需要被環繞的元素提起來，成為了一個高尚的元素一個脫離了低級趣味的元素：

脫離普通文檔流浮起來，形成一條新的VIP隊列停在普通元素上空。

不過這條隊列是有限制的，它只能在父元素內浮動，而不是在整個頁面里。

浮動后的元素很特殊，它們在布局的時候既像是塊級元素，可以設置寬和高；又像行內元素，可以手拉手擠成一行。

同時可以設置它的浮動屬性值為left或者是right，讓它向左或者向右靠攏

一直到碰到它的父容器的邊界或者是排在前面的元素才會消停。

而在浮動元素之后的普通元素則會裝作浮動元素根本不存在的樣子自顧自地布局。

這樣在頁面上看來：

浮動元素在上、普通元素在下，形成了兩層疊放在父級容器當中，并且浮動元素會遮住普通元素。

不過普通文檔流里的文本節點非常敏感：

它們會識別到浮在頭頂的浮動元素，表示堅決不能屈居其下，于是都紛紛跑出來繞開它，成全了圖文混排的需求。

比如這里有ABC三個塊級元素，在沒有浮動的時候它們看起來是這樣的：

如果讓B元素左浮動，它就被提起來放在左前方，后面的C元素擠上來當做B元素不存在的樣子。

但是如果C元素中有文字，則會看到C元素中文字的位置被浮在上方B元素所占據，文字紛紛繞開，形成文字環繞的效果。

再比如這里有ABCD四個塊級元素，在沒有浮動的時候它們看起來是這樣的：

A是大標題，B和C都是圖片，D則是一大段文字。

我們讓圖片B和C一個左浮動一個右浮動，B和C形成新的VIP隊列挨著前面的元素，浮起來停靠在普通元素上空。

D元素向上彌補了BC元素的空缺，正好被BC元素遮住，而D元素中的文字則是紛紛繞開BC元素

看起來則是這樣的文字環繞效果。

不過這個世界上很多事情并不會總是沿著預想的方向進行下去

比如皇帝的煉丹師就沒能想到他們的辛勤勞動成就了火藥，而浮動的創造者也沒想到最后成就了多列布局。

因為光是這樣、以及這樣的布局已經無法滿足日益增長的上網人群

人們希望頁面更豐富更好看，渴望看到這樣的、這樣的以及這樣的布局

然而塊級元素獨占一行，行內元素又無法設置寬高。

于是又有人把主意打到了浮動身上：

可以設置寬和高，又能在一行內布局多個

雖然是個插隊份子，但只要注意彈壓普通元素的情緒，那它就是這個完美人選。

于是利用浮動，形成了一大波布局新浪潮：

基于浮動的三列布局

這種左右兩邊寬度固定，中間自適應的布局非常常見，實現的思路之一就是利用浮動。

在頁面中編寫3個DIV，分別為ABC，

首先設置A元素寬高并且左浮動

然后設置B元素寬高并且有浮動

最后是C元素作為一個普通塊級元素保留在普通文檔流當中

把浮動的A和B元素當做不存在，設置寬高后，看起來就是這樣的：

為了讓C元素中的所有元素都能在頁面中展示出來，因此為C元素設置外邊距，大于浮動的元素寬度

這就是利用浮動和margin錯開布局的三列布局思路

怎么樣是不是很簡單？

趕緊上手寫點代碼練習一下吧~

更多內容，歡迎加大師姐微信it_xzy，入群717415872了解課程動態、幕后花絮，還有機會參與到課程制作，成為聯合制作人

記得備注來自果凍課堂喲

總結

以上是生活随笔為你收集整理的网页设计图片向上浮动_果冻公开课第六课：5分钟理解浮动布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。