資訊專欄INFORMATION COLUMN
摘要：浮動的理解什么是浮動概念浮動是指的是的屬性。對于設(shè)置了浮動的元素，在頁面效果上可以通俗的理解為這個元素漂起來了在水上，位置發(fā)生變化，不按代碼中排列。關(guān)于浮動，后續(xù)會總結(jié)以下消除浮動影響的相關(guān)內(nèi)容。
css浮動的理解 什么是“浮動” 概念
浮動是指的是css的屬性float。對于設(shè)置了浮動的元素，在頁面效果上可以通俗的理解為“這個元素漂起來了（在水上）”，位置發(fā)生變化，不按HTML代碼中排列。從定義上理解，即該元素脫離了文檔流（常規(guī)流）。
以下是MDN web docs中關(guān)于浮動的描述：
float CSS屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。該元素從網(wǎng)頁的正常流動中移除，盡管仍然保持部分的流動性（與絕對定位相反）。效果
從兩張圖片簡單的看以下浮動的效果：
a在容器中是塊級元素，占據(jù)一整行的位置（父級的全部寬度），后續(xù)的文字排列在其下方。
給a添加上float: left;，后續(xù)的文字緊跟a排列。
浮動對布局的影響從上面的圖片例子直觀的了解了浮動后，我們來仔細(xì)看看，浮動對于布局的影響。
浮動元素對兄弟元素的影響：當(dāng)兄弟元素是塊級元素，浮動元素不會影響其布局。
塊a浮動后，塊b仍然占據(jù)一整行。視覺上，即塊a浮到了塊b的上一層。
當(dāng)兄弟元素是行內(nèi)元素，它的布局會收到浮動元素的影響。
將“float CSS”放在span標(biāo)簽中，發(fā)現(xiàn)其位置和后續(xù)的文本一樣，被浮動的塊a“頂開了”。
當(dāng)父級元素是行內(nèi)元素，浮動效果如下：
產(chǎn)生了和兄弟行內(nèi)元素一樣的效果。
所以，在使用浮動的時候，父級元素一般不要使用行內(nèi)元素，避免造成不必要的麻煩。
當(dāng)父級元素是塊級元素。我們先看沒有浮動的情況：
對比加了浮動之后，
很明顯的能發(fā)現(xiàn)，浮動元素對于父級最大的影響在于，不能“撐開”父級元素。
對于多個浮動元素（浮動方向一致），在布局上就是單純的按照元素在HTML代碼中的順序依次擺放。這里要說的是，在擺放中的一些規(guī)則。
塊a、b和c同為向左浮動的元素，它們橫向依次排列。當(dāng)我們嘗試增加塊c的寬度到超過父級的限制時，塊c就挪到了塊a、b的下方?？梢院唵蔚睦斫鉃?，a、b所在的“第一行”已經(jīng)放不下c了，所以把c靠著左邊（浮動方向）放到“下一行”。可以把這個規(guī)則略微粗暴的歸納為：換行。
這里將的“行”的概念并不是真正指一整行的空間，是個抽象概念。
另一種情況，我們不增加c的寬度，而是在塊c之后加上塊d。
這就會很奇怪，根據(jù)上面的歸納，塊d不該放到“下一行”嗎？
所以，另一條規(guī)則就是：上移。但是，僅僅是單純的上移是不準(zhǔn)確的，我們看下面的情況：
可以看到，雖然塊a下方仍有控件，但是塊d不會上移去填補這部分空白，并且，塊d始終是處于塊c的下方的，即塊d的頂部始終不超過塊c的底邊。
對于上移規(guī)則的限制，可以說不超過前一個浮動元素
綜上，浮動元素的擺放規(guī)則可總結(jié)為：
水平方向上，靠左（根據(jù)浮動方向）依次擺放
擺不下，擺下一行
換行后，盡量上移，但不能超過前一個浮動元素的底邊
浮動的運用用浮動來實現(xiàn)布局，比如，商品的展示頁面，
側(cè)導(dǎo)航欄等等。
總的來說，浮動的使用是為了改變元素的位置（其實更貼切來說應(yīng)該是順序），使其按照我們所想的擺放在頁面上，因此浮動廣泛用于頁面的布局之上。在CSS新加入Flex（彈性）布局之后，由于便于操作，在實現(xiàn)布局上會選擇Flex來實現(xiàn)，但浮動運用依舊廣泛。具體就要看我們在開發(fā)過程中的需求和自己的選擇了。
再講兩句在梳理這些知識之前，雖說知道了浮動是怎么回事，但始終沒有把它統(tǒng)一的歸納起來，自己捋一遍，才發(fā)覺其中確實有一些值得好好推敲的細(xì)節(jié)。能力和經(jīng)驗有限，理解不一定能準(zhǔn)確到位，在網(wǎng)上看了相關(guān)的資料和視頻后，決定寫下這篇文章，看看自己是不是真的理解了這個東西。
關(guān)于浮動，后續(xù)會總結(jié)以下消除浮動影響的相關(guān)內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112997.html
摘要：那我們舉個栗子當(dāng)先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同?？偨Y(jié)總結(jié)下來，浮動與清除浮動的順序關(guān)系如下設(shè)置元素浮動，元素脫離文檔流，不計算高度。 本文主要探討兩個問題： 為什么CSS設(shè)置浮動會引起父元素塌陷 為什么設(shè)置clear:both能清除浮動，并撐開父元素。 起因 CSS的浮動，算是我在寫網(wǎng)頁時用的最多的屬性之一。但...
摘要：浮動為什么會有文本環(huán)繞效果產(chǎn)生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...
摘要：浮動為什么會有文本環(huán)繞效果產(chǎn)生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。 作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現(xiàn)很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。 本文主要討論以下幾個問題：1.浮動的原始用途...
摘要：包裹性所謂包裹性，其實是由包裹和自適應(yīng)兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動屬性，則父元素就會出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當(dāng)就會出現(xiàn)意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...
摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來解決這個布局問題。是布局中的一個迷你布局你可以將看作是頁面內(nèi)的一個迷你布局。理解瀏覽器如何布置網(wǎng)頁是非?；A(chǔ)的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關(guān)于塊格式化上下文(BFC)的。你可能從未聽說過這個術(shù)語，但是如果你曾經(jīng)用CSS做過布局，你可能知道它是什么...
閱讀 3373·2023-04-26 01:40
閱讀 3080·2021-11-24 09:39
閱讀 1393·2021-10-27 14:19
閱讀 2638·2021-10-12 10:11
閱讀 1298·2021-09-26 09:47
閱讀 1840·2021-09-22 15:21
閱讀 2678·2021-09-06 15:00
閱讀 879·2021-08-10 09:44
