資訊專(zhuān)欄INFORMATION COLUMN
摘要：清除浮動(dòng)并不是說(shuō)讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。
我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來(lái)自浮動(dòng)的困擾，因此專(zhuān)門(mén)通過(guò)實(shí)踐來(lái)總結(jié)一下浮動(dòng)與清除浮動(dòng)。
首先總結(jié)幾個(gè)基礎(chǔ)的概念：
浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]；
文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行
接下來(lái)我們通過(guò)實(shí)際演示來(lái)看看關(guān)于浮動(dòng)的那些事兒。
下面是5個(gè)div塊元素在文檔流中一次排列
我們知道浮動(dòng)元素有幾個(gè)規(guī)律
如果浮動(dòng)元素的上一個(gè)元素也是浮動(dòng)，那么該元素會(huì)與上一個(gè)元素排列在同一行，如果行寬不夠，后面的元素會(huì)被擠到下一行
如果浮動(dòng)元素的上一個(gè)元素不是浮動(dòng)，那么該元素仍然處于上一個(gè)元素的下方，根據(jù)浮動(dòng)設(shè)定在左或者在右，而其本身也脫離文檔流。后邊的元素會(huì)自動(dòng)往上移動(dòng)到上一個(gè)文檔流塊元素下方為止
根據(jù)上面的規(guī)則，我們做一些改動(dòng)來(lái)驗(yàn)證一下
給2添加左浮動(dòng)，給3添加右浮動(dòng)
首先1沒(méi)有浮動(dòng)，所以2在1的下一行，而3的上一個(gè)元素2是有浮動(dòng)的，所以3和2在同一行，2和3因?yàn)橛辛烁?dòng)，所以脫離了文檔流，他們后面的元素4就自動(dòng)往上移動(dòng)，處于1的下方
給元素2添加左浮動(dòng)
因?yàn)樗纳弦粋€(gè)元素1沒(méi)有浮動(dòng)，所以排列在1的下方，不和1同一行。而元素2同時(shí)脫離了普通流，因此后邊的元素會(huì)頂替上來(lái)
因此，浮動(dòng)元素的位置是根據(jù)他的上一個(gè)元素來(lái)確定的[以及浮動(dòng)位置來(lái)確定]
清除浮動(dòng)
可能浮動(dòng)會(huì)比較好理解一點(diǎn)，而不少人會(huì)對(duì)清除浮動(dòng)有一些誤解。
清除浮動(dòng)并不是說(shuō)讓浮動(dòng)元素回到文檔流
清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。目的是讓自己的左邊或者右邊沒(méi)有浮動(dòng)元素
例子1
給2添加左浮動(dòng)，給3添加右浮動(dòng)，之后給3添加清除左邊的浮動(dòng)。
因?yàn)?是3的上一個(gè)元素，所以給3清除浮動(dòng)，只有2才能影響他的位置，而2在3的左邊，因此只有給3添加清除左浮動(dòng)才有效果，清除左邊浮動(dòng)的意思，就是讓2不在3的左邊，所以3會(huì)改變自己的位置，移動(dòng)到2的下一行，但是右浮動(dòng)的效果任然在，所以在下一行的右側(cè)
再給5添加刪除右浮動(dòng)效果，因?yàn)?的右邊有一個(gè)浮動(dòng)元素是3，而3是5前面的元素，因此5會(huì)改變位置，讓自己左右沒(méi)有浮動(dòng)元素
例子2
給1，2，3，4添加左浮動(dòng)
然后給3添加清除左浮動(dòng)的效果。如果直接給3清除右浮動(dòng)，將沒(méi)有任何變化，因?yàn)?右邊的浮動(dòng)效果是4，而4處于3的后邊，不會(huì)影響3的位置
關(guān)于高度坍塌
當(dāng)沒(méi)有指定高度的父元素中的子元素全部都浮動(dòng)時(shí)，父元素中內(nèi)部高度因?yàn)槭瞧胀髦械膲K元素?fù)纹饋?lái)的，所以這個(gè)時(shí)候父元素的高度會(huì)變成0.或者會(huì)有部分浮動(dòng)元素的位置會(huì)超出父元素的高度之外。這種現(xiàn)象，叫做高度坍塌。
如下圖，給元素設(shè)置左浮動(dòng)。設(shè)置了邊框的父元素因?yàn)闆](méi)有高度所以上下邊框重合，看上去就像一條線
解決方法：使用:after偽元素
高度坍塌
after的原理是在div1的子元素最末尾添加一個(gè)元素，如果該元素能夠位于div2的后面，并且沒(méi)有浮動(dòng)，那么父元素div1的高度就會(huì)重新獲取。因此使用了上方的解決方案
因此，閉合浮動(dòng)之后，一切恢復(fù)正常
這就是通過(guò)在子元素末尾添加偽元素來(lái)解決高度坍塌問(wèn)題的解決方案。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/21729.html
摘要：清除浮動(dòng)并不是說(shuō)讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來(lái)自浮動(dòng)的困擾，因此專(zhuān)門(mén)通過(guò)實(shí)踐來(lái)總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來(lái)我們通過(guò)實(shí)...
摘要：清除浮動(dòng)并不是說(shuō)讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來(lái)自浮動(dòng)的困擾，因此專(zhuān)門(mén)通過(guò)實(shí)踐來(lái)總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來(lái)我們通過(guò)實(shí)...
摘要：清除浮動(dòng)并不是說(shuō)讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁(yè)面布局的時(shí)候，多多少少總會(huì)受到來(lái)自浮動(dòng)的困擾，因此專(zhuān)門(mén)通過(guò)實(shí)踐來(lái)總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來(lái)我們通過(guò)實(shí)...
摘要：另一種元素是內(nèi)聯(lián)元素，它們會(huì)與之前的內(nèi)容保持顯示在一行。即使圖片是內(nèi)聯(lián)元素，它們也被它們的父塊級(jí)元素列表項(xiàng)控制。當(dāng)一行中多個(gè)元素被浮動(dòng)，它們會(huì)產(chǎn)生同內(nèi)聯(lián)元素的流類(lèi)似的效果。浮動(dòng)元素不能高過(guò)前一行內(nèi)聯(lián)元素。 浮動(dòng)到底是做什么呢？他們是如何影響相關(guān)元素的盒模型的呢？浮動(dòng)的元素與內(nèi)聯(lián)元素有什么不同呢？制定浮動(dòng)元素的位置的具體規(guī)則是什么？clear屬性是如何工作的，并且它的作用是什么？ 即使是...
閱讀 2404·2021-11-23 09:51
閱讀 1217·2021-11-22 13:54
閱讀 3427·2021-09-24 10:31
閱讀 1089·2021-08-16 10:46
閱讀 3627·2019-08-30 15:54
閱讀 707·2019-08-30 15:54
閱讀 2888·2019-08-29 17:17
閱讀 3162·2019-08-29 15:08
