css浮動(dòng)的理解

WilsonLiu95 發(fā)布于2019-08-29 14:13 / 1987人閱讀

摘要：浮動(dòng)的理解什么是浮動(dòng)概念浮動(dòng)是指的是的屬性。對(duì)于設(shè)置了浮動(dòng)的元素，在頁面效果上可以通俗的理解為這個(gè)元素漂起來了在水上，位置發(fā)生變化，不按代碼中排列。關(guān)于浮動(dòng)，后續(xù)會(huì)總結(jié)以下消除浮動(dòng)影響的相關(guān)內(nèi)容。

css浮動(dòng)的理解 什么是“浮動(dòng)” 概念

浮動(dòng)是指的是css的屬性float。對(duì)于設(shè)置了浮動(dòng)的元素，在頁面效果上可以通俗的理解為“這個(gè)元素漂起來了（在水上）”，位置發(fā)生變化，不按HTML代碼中排列。從定義上理解，即該元素脫離了文檔流（常規(guī)流）。

以下是MDN web docs中關(guān)于浮動(dòng)的描述：

float CSS屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。該元素從網(wǎng)頁的正常流動(dòng)中移除，盡管仍然保持部分的流動(dòng)性（與絕對(duì)定位相反）。

效果

從兩張圖片簡(jiǎn)單的看以下浮動(dòng)的效果：

a在容器中是塊級(jí)元素，占據(jù)一整行的位置（父級(jí)的全部寬度），后續(xù)的文字排列在其下方。

給a添加上float: left;，后續(xù)的文字緊跟a排列。

浮動(dòng)對(duì)布局的影響

從上面的圖片例子直觀的了解了浮動(dòng)后，我們來仔細(xì)看看，浮動(dòng)對(duì)于布局的影響。

浮動(dòng)元素對(duì)兄弟元素的影響：

當(dāng)兄弟元素是塊級(jí)元素，浮動(dòng)元素不會(huì)影響其布局。

塊a浮動(dòng)后，塊b仍然占據(jù)一整行。視覺上，即塊a浮到了塊b的上一層。

當(dāng)兄弟元素是行內(nèi)元素，它的布局會(huì)收到浮動(dòng)元素的影響。

將“float CSS”放在span標(biāo)簽中，發(fā)現(xiàn)其位置和后續(xù)的文本一樣，被浮動(dòng)的塊a“頂開了”。

浮動(dòng)元素對(duì)父級(jí)元素的影響

當(dāng)父級(jí)元素是行內(nèi)元素，浮動(dòng)效果如下：

產(chǎn)生了和兄弟行內(nèi)元素一樣的效果。

所以，在使用浮動(dòng)的時(shí)候，父級(jí)元素一般不要使用行內(nèi)元素，避免造成不必要的麻煩。

當(dāng)父級(jí)元素是塊級(jí)元素。我們先看沒有浮動(dòng)的情況：

對(duì)比加了浮動(dòng)之后，

很明顯的能發(fā)現(xiàn)，浮動(dòng)元素對(duì)于父級(jí)最大的影響在于，不能“撐開”父級(jí)元素。

浮動(dòng)元素之間的影響

對(duì)于多個(gè)浮動(dòng)元素（浮動(dòng)方向一致），在布局上就是單純的按照元素在HTML代碼中的順序依次擺放。這里要說的是，在擺放中的一些規(guī)則。

塊a、b和c同為向左浮動(dòng)的元素，它們橫向依次排列。當(dāng)我們嘗試增加塊c的寬度到超過父級(jí)的限制時(shí)，塊c就挪到了塊a、b的下方。可以簡(jiǎn)單的理解為，a、b所在的“第一行”已經(jīng)放不下c了，所以把c靠著左邊（浮動(dòng)方向）放到“下一行”。可以把這個(gè)規(guī)則略微粗暴的歸納為：換行。

這里將的“行”的概念并不是真正指一整行的空間，是個(gè)抽象概念。

另一種情況，我們不增加c的寬度，而是在塊c之后加上塊d。
這就會(huì)很奇怪，根據(jù)上面的歸納，塊d不該放到“下一行”嗎？

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

可以看到，雖然塊a下方仍有控件，但是塊d不會(huì)上移去填補(bǔ)這部分空白，并且，塊d始終是處于塊c的下方的，即塊d的頂部始終不超過塊c的底邊。
對(duì)于上移規(guī)則的限制，可以說不超過前一個(gè)浮動(dòng)元素

綜上，浮動(dòng)元素的擺放規(guī)則可總結(jié)為：

水平方向上，靠左（根據(jù)浮動(dòng)方向）依次擺放

擺不下，擺下一行

換行后，盡量上移，但不能超過前一個(gè)浮動(dòng)元素的底邊

浮動(dòng)的運(yùn)用

用浮動(dòng)來實(shí)現(xiàn)布局，比如，商品的展示頁面，

側(cè)導(dǎo)航欄等等。

總的來說，浮動(dòng)的使用是為了改變?cè)氐奈恢茫ㄆ鋵?shí)更貼切來說應(yīng)該是順序），使其按照我們所想的擺放在頁面上，因此浮動(dòng)廣泛用于頁面的布局之上。在CSS新加入Flex（彈性）布局之后，由于便于操作，在實(shí)現(xiàn)布局上會(huì)選擇Flex來實(shí)現(xiàn)，但浮動(dòng)運(yùn)用依舊廣泛。具體就要看我們?cè)陂_發(fā)過程中的需求和自己的選擇了。

再講兩句

在梳理這些知識(shí)之前，雖說知道了浮動(dòng)是怎么回事，但始終沒有把它統(tǒng)一的歸納起來，自己捋一遍，才發(fā)覺其中確實(shí)有一些值得好好推敲的細(xì)節(jié)。能力和經(jīng)驗(yàn)有限，理解不一定能準(zhǔn)確到位，在網(wǎng)上看了相關(guān)的資料和視頻后，決定寫下這篇文章，看看自己是不是真的理解了這個(gè)東西。
關(guān)于浮動(dòng)，后續(xù)會(huì)總結(jié)以下消除浮動(dòng)影響的相關(guān)內(nèi)容。