网页设计图片向上浮动_果冻公开课第六课：5分钟理解浮动布局
浮動(dòng)，是如何實(shí)現(xiàn)頁(yè)面布局的呢？
它有哪些特質(zhì)和使用方法？
今天，我們就用5分鐘的動(dòng)畫短視頻來(lái)深入淺出地理解浮動(dòng)~
動(dòng)畫視頻：
果凍公開課：如何理解浮動(dòng)布局？
文字解析：
網(wǎng)頁(yè)兒也能這么圖文并茂嗎？
假設(shè)這里有一個(gè)標(biāo)題、一幅畫兒和一段文字
如果把這三個(gè)元素都設(shè)為塊級(jí)元素，那么看起來(lái)將是這樣的：
因?yàn)閴K級(jí)元素的特點(diǎn)是：
可以設(shè)置寬和高，但它會(huì)獨(dú)占一行。
如果把后兩個(gè)個(gè)元素都設(shè)為行內(nèi)元素，那么看起來(lái)則是這樣的：
因?yàn)樾袃?nèi)元素的特點(diǎn)是：
可以多個(gè)元素手拉手站一行，擠不下時(shí)就新開一行繼續(xù)擠
但是不能設(shè)置寬和高，只能被內(nèi)部的內(nèi)容撐開，就像氣球一樣，需要在里面充入空氣才會(huì)拉伸開。
然而這樣的效果依舊不是很好，因?yàn)閳D片作為行內(nèi)元素和文字一樣手拉手站一起排隊(duì)
不過(guò)因?yàn)閳D片的又高又胖把整個(gè)空間撐大了，但這樣并不會(huì)形成文字環(huán)繞的效果
所以應(yīng)該怎么辦呢？
還好這個(gè)世界上聰明人很多，有人想到了一個(gè)點(diǎn)子，設(shè)計(jì)這么一個(gè)屬性：浮動(dòng)
把需要被環(huán)繞的元素提起來(lái)，成為了一個(gè)高尚的元素一個(gè)脫離了低級(jí)趣味的元素：
脫離普通文檔流浮起來(lái)，形成一條新的VIP隊(duì)列停在普通元素上空。
不過(guò)這條隊(duì)列是有限制的，它只能在父元素內(nèi)浮動(dòng)，而不是在整個(gè)頁(yè)面里。
浮動(dòng)后的元素很特殊，它們?cè)诓季值臅r(shí)候既像是塊級(jí)元素，可以設(shè)置寬和高；又像行內(nèi)元素，可以手拉手?jǐn)D成一行。
同時(shí)可以設(shè)置它的浮動(dòng)屬性值為left或者是right，讓它向左或者向右靠攏
一直到碰到它的父容器的邊界或者是排在前面的元素才會(huì)消停。
而在浮動(dòng)元素之后的普通元素則會(huì)裝作浮動(dòng)元素根本不存在的樣子自顧自地布局。
這樣在頁(yè)面上看來(lái)：
浮動(dòng)元素在上、普通元素在下，形成了兩層疊放在父級(jí)容器當(dāng)中，并且浮動(dòng)元素會(huì)遮住普通元素。
不過(guò)普通文檔流里的文本節(jié)點(diǎn)非常敏感：
它們會(huì)識(shí)別到浮在頭頂?shù)母?dòng)元素，表示堅(jiān)決不能屈居其下，于是都紛紛跑出來(lái)繞開它，成全了圖文混排的需求。
比如這里有ABC三個(gè)塊級(jí)元素，在沒有浮動(dòng)的時(shí)候它們看起來(lái)是這樣的：
如果讓B元素左浮動(dòng)，它就被提起來(lái)放在左前方，后面的C元素?cái)D上來(lái)當(dāng)做B元素不存在的樣子。
但是如果C元素中有文字，則會(huì)看到C元素中文字的位置被浮在上方B元素所占據(jù)，文字紛紛繞開，形成文字環(huán)繞的效果。
再比如這里有ABCD四個(gè)塊級(jí)元素，在沒有浮動(dòng)的時(shí)候它們看起來(lái)是這樣的：
A是大標(biāo)題，B和C都是圖片，D則是一大段文字。
我們讓圖片B和C一個(gè)左浮動(dòng)一個(gè)右浮動(dòng)，B和C形成新的VIP隊(duì)列挨著前面的元素，浮起來(lái)停靠在普通元素上空。
D元素向上彌補(bǔ)了BC元素的空缺，正好被BC元素遮住，而D元素中的文字則是紛紛繞開BC元素
看起來(lái)則是這樣的文字環(huán)繞效果。
不過(guò)這個(gè)世界上很多事情并不會(huì)總是沿著預(yù)想的方向進(jìn)行下去
比如皇帝的煉丹師就沒能想到他們的辛勤勞動(dòng)成就了火藥，而浮動(dòng)的創(chuàng)造者也沒想到最后成就了多列布局。
因?yàn)楣馐沁@樣、以及這樣的布局已經(jīng)無(wú)法滿足日益增長(zhǎng)的上網(wǎng)人群
人們希望頁(yè)面更豐富更好看，渴望看到這樣的、這樣的以及這樣的布局
然而塊級(jí)元素獨(dú)占一行，行內(nèi)元素又無(wú)法設(shè)置寬高。
于是又有人把主意打到了浮動(dòng)身上：
可以設(shè)置寬和高，又能在一行內(nèi)布局多個(gè)
雖然是個(gè)插隊(duì)份子，但只要注意彈壓普通元素的情緒，那它就是這個(gè)完美人選。
于是利用浮動(dòng)，形成了一大波布局新浪潮：
基于浮動(dòng)的三列布局
這種左右兩邊寬度固定，中間自適應(yīng)的布局非常常見，實(shí)現(xiàn)的思路之一就是利用浮動(dòng)。
在頁(yè)面中編寫3個(gè)DIV，分別為ABC，
首先設(shè)置A元素寬高并且左浮動(dòng)
然后設(shè)置B元素寬高并且有浮動(dòng)
最后是C元素作為一個(gè)普通塊級(jí)元素保留在普通文檔流當(dāng)中
把浮動(dòng)的A和B元素當(dāng)做不存在，設(shè)置寬高后，看起來(lái)就是這樣的：
為了讓C元素中的所有元素都能在頁(yè)面中展示出來(lái)，因此為C元素設(shè)置外邊距，大于浮動(dòng)的元素寬度
這就是利用浮動(dòng)和margin錯(cuò)開布局的三列布局思路
怎么樣是不是很簡(jiǎn)單？
趕緊上手寫點(diǎn)代碼練習(xí)一下吧~
更多內(nèi)容，歡迎加大師姐微信it_xzy，入群717415872了解課程動(dòng)態(tài)、幕后花絮，還有機(jī)會(huì)參與到課程制作，成為聯(lián)合制作人
記得備注來(lái)自果凍課堂喲
總結(jié)
以上是生活随笔為你收集整理的网页设计图片向上浮动_果冻公开课第六课：5分钟理解浮动布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为软件java笔试_华为软件笔试题4.
- 下一篇： mysql noinstall 5.5_