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