理解CSS的浮動(dòng)Float
前言提到浮動(dòng)，前端的小伙伴肯定都不陌生，但是隨著彈性布局等等一些更好用的標(biāo)準(zhǔn)出來(lái)后，用在布局方面少了很多，當(dāng)初我剛開(kāi)始接觸前端的時(shí)候，很習(xí)慣用浮動(dòng)來(lái)給元素改變定位，當(dāng)時(shí)還并不是很流行flexbox布局，很多布局會(huì)通過(guò)浮動(dòng)來(lái)實(shí)現(xiàn)，但是使用浮動(dòng)來(lái)布局會(huì)產(chǎn)生一些副作用，比如雖然使用浮動(dòng)可以使元素向左或向右靠齊，但會(huì)造成高度坍塌，當(dāng)時(shí)的我并不太了解其中的緣由，只是機(jī)械地從網(wǎng)上搜索到一些解決高度坍塌的代碼，到現(xiàn)在也不能算是了解的很透徹，只能算是比剛開(kāi)始做前端的時(shí)候多了解了一點(diǎn)。 脫離文檔流在說(shuō)到浮動(dòng)的時(shí)候，很多地方都會(huì)說(shuō)，它們脫離了文檔流，那么正常情況下文檔流是怎么樣的呢？ 寫(xiě)過(guò)HTML的小伙伴應(yīng)該都了解，HTML中的元素應(yīng)用的是默認(rèn)的流式布局；假設(shè)頁(yè)面上有一個(gè) 應(yīng)用了浮動(dòng)的元素就不受流式布局的控制了。比如應(yīng)用了 那么浮動(dòng)有什么特點(diǎn)，清除浮動(dòng)又是什么意思呢？ 浮動(dòng)前端有幾個(gè)較為有名的布局方式，比如圣杯布局、雙飛翼布局等等，使用 我們可以把文檔想象成一個(gè)水面，而浮動(dòng)元素就好比是浮在水面上的船。水波環(huán)繞船體，就像浮動(dòng)元素被其他內(nèi)容環(huán)繞一樣。比如下面這張圖：
設(shè)計(jì)
這里流動(dòng)的內(nèi)容就可以比作流動(dòng)的水，所以我們經(jīng)常能看到使用
只能說(shuō)早些時(shí)候的CSS還不夠完善，不能滿(mǎn)足一些特殊的布局需求，而 當(dāng)使用
float會(huì)影響所在行的行方框，也就是 清除浮動(dòng)在使用浮動(dòng)用于布局之后，我們常常需要清除浮動(dòng)，那么清除浮動(dòng)是什么意思呢？這里可以繼續(xù)用前面浮在水面上的船來(lái)舉例子，雖然可能不算很貼切。 船在水面上是浮動(dòng)著的，隨著水流的作用會(huì)飄移，那么就有可能飄移到其他的水域，清除浮動(dòng)就類(lèi)似于阻止這艘船飄移，比如安裝一道閘門(mén)，防止船飄進(jìn)來(lái)或飄出去。通過(guò)設(shè)置特定的css屬性來(lái)清除浮動(dòng)，就類(lèi)似于這里的安裝閘門(mén)。
創(chuàng)建BFC容器之前在《對(duì)BFC的理解》中我們有提到過(guò)，可以通過(guò)創(chuàng)建BFC容器的方式來(lái)清除浮動(dòng)，比如設(shè)置 假設(shè)有以下一段HTML： <div style="width: 100px; height: 100px; border: 1px solid orange; float: left;"> <span>文本文本111文本文本111文本文本111</span> </div> <div style="width: 100px; height: 100px; background: pink; "> <span>文本文本222</span> </div> 在未清除浮動(dòng)前是這樣的：
可以看到， 將第一個(gè)div用BFC容器包裹后（類(lèi)似于閘門(mén)的作用）： <div style="display: flow-root;"> <div style="width: 100px; height: 100px; border: 1px solid orange; float: left;"> <span>文本文本111文本文本111文本文本111</span> </div> </div> <div style="width: 100px; height: 100px; background: pink;"> <span>文本文本222</span> </div> 頁(yè)面就變成了下面這個(gè)樣子：
使用clear屬性可以看到在規(guī)范文檔中，還直接提供了一個(gè)
創(chuàng)建BFC的方式可以類(lèi)比為上游水域在下游口安裝了閘門(mén)，使用 <div style="width: 100px; height: 100px; border: 1px solid orange; float: left;"> <span>文本文本111文本文本111文本文本111</span> </div> <div style="width: 100px; height: 100px; background: pink; clear: left;"> <span>文本文本222</span> </div> 可以看到，最終效果和上面創(chuàng)建BFC的效果是一樣的。但實(shí)際我之前看到的解決浮動(dòng)的方案中，比較推薦的做法是由浮動(dòng)的元素這邊來(lái)處理清除，比如創(chuàng)建BFC容器，或者加在偽元素 <div id="float-box"> <div style="width: 100px; height: 100px; border: 1px solid orange; float: left;"> <span>文本文本111文本文本111文本文本111</span> </div> </div> <style> #float-box::after { content: ''; display: block; clear: left; } </style> <div style="width: 100px; height: 100px; background: pink;"> <span>文本文本222</span> </div> 上面的代碼中使用
根據(jù)文檔里的描述， 但是規(guī)范文檔中也提示我們，使用
在《對(duì)BFC的理解》中，我們提到過(guò)，在BFC容器中，相鄰塊級(jí)盒子之間的垂直'margin'會(huì)折疊。這里的意思應(yīng)該就是指，設(shè)置了 文檔中給出了間隙的值是怎么計(jì)算得出的：
光從描述上看，有點(diǎn)抽象，尤其是第二種計(jì)算，這里所謂的假設(shè)位置是哪里呢？第一種似乎好理解一些，就是讓兩個(gè)邊緣對(duì)齊的一個(gè)間隔的量。所以文檔中也舉了例子來(lái)配合解說(shuō)。
從名稱(chēng)就可以看出，F(xiàn)是個(gè)浮動(dòng)塊高度為H，此時(shí)B1有個(gè)bottom margin值為M1，B2有個(gè)top margin值為M2，在B2未設(shè)置clear屬性之前，B1和B2之間的間距為M1和M2中的較大值，也就是產(chǎn)生了垂直 假設(shè)B1的底部邊框在y=0這個(gè)位置，就如上圖所示，此時(shí)浮動(dòng)框F的頂部位置就在y=M1的位置，而B(niǎo)2的頂部邊框就在y=max(M1,M2)的位置，浮動(dòng)框F的底部位置在y=M1+H的位置。 在這個(gè)例子中，B2不在F下面，這個(gè)例子所描述的就是需要添加間隙的場(chǎng)景。也就是說(shuō)：
根據(jù)文檔中描述的計(jì)算方式，這里需要計(jì)算兩次間隙量，C1和C2，然后取兩者中的較大值：C = 第一種方法是使 B2 的頂部與 F 的底部齊平，即 y(top of B2) = M1 + H。這意味著margin不再折疊（B1和B2的間距肯定大于M1和M2），它們之間有了間隙： 此時(shí)它們的等式關(guān)系為： F的底部 = B2的頂部邊框 M1 + H = M1 + C1 + M2 C1 = M1 + H - M1 - M2 = H - M2 第二中計(jì)算是保持 B2 的頂部位置，即 y(top of B2) = max(M1,M2)。也就是B2邊框在其假設(shè)位置，按照預(yù)期保持垂直 max(M1, M2) = M1 + C2 + M2 C2 = max(M1, M2) - M1 - M2 因?yàn)榧僭O(shè)了 C2 = max(M1, M2) - M1 - M2 < M1 + H - M1 - M2 = H - M2 C2 < H1 - M2 又因?yàn)?code style="font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, sans-serif; padding: 0px 5px; line-height: 1.6; margin: 0px 3px; display: inline-block; overflow-x: auto; vertical-align: middle; border-radius: 3px; background-color: rgb(251, 229, 225); color: rgb(192, 52, 29); font-weight: bold;">C1 = H1 - M2，所以在這個(gè)場(chǎng)景中
<p style="margin-bottom: 4em"> First paragraph.</p> <p style="float: left; height: 2em; margin: 0"> Floating paragraph.</p> <p style="clear: left; margin-top: 3em"> Last paragraph.</p> 在最后一個(gè) 當(dāng)我們?cè)O(shè)置 c + m-t = 2em c = 2em - m-t = 2em - 3em = -1em 第一種方式計(jì)算C1 = H - M2 = 2em - 3em = -1em 第二種計(jì)算方式，也就是保持 最后一個(gè) 所以最后C=max(C1,C2)=-1em。 從上面兩個(gè)例子可以看出，間隙量的兩種計(jì)算方式的區(qū)別就在于，是否改變浮動(dòng)框后續(xù)元素的頂部位置。 總結(jié)隨著彈性布局、網(wǎng)格布局等一系列新的布局方式引入后，浮動(dòng)的使用少了很多，但它仍然能實(shí)現(xiàn)特殊的網(wǎng)頁(yè)效果，因此我們還是需要對(duì)它進(jìn)行必要的了解。 本文來(lái)自博客園，作者：beckyye，轉(zhuǎn)載請(qǐng)注明原文鏈接：https://www.cnblogs.com/beckyyyy/p/18032321 該文章在 2024/2/27 9:19:10 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
