資訊專欄INFORMATION COLUMN
摘要：可以得出產生高度塌陷的原因在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。
目錄
例如：
HTML：
first-child1
first-child2
second
third
CSS：
.first{
width: 300px;
background-color: pink;
}
.first .first-child1,.first .first-child2{
float: left;
width: 100px;
height: 100px;
}
.first .first-child1{
background-color: purple;
margin-right: 10px;
}
.first .first-child2{
background-color: red;
}
.second{
width: 200px;
height: 150px;
background-color: blue;
}
.third{
width: 100px;
height: 150px;
background-color: green;
}表現為：
由上面的例子可以看出，first盒子沒有設置高度，由子元素撐開，但是由于子盒子設置了浮動，脫離了標準流，所以導致first盒子沒有高度，表現為second和third盒子向上移動了。
可以得出產生高度塌陷的原因：
在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂。
給父元素設置固定高度。但是使用這種方式后，父元素的高度就不能根據子元素自動撐高了，可以根據自己頁面的特點，如果可以固定高度，可以使用這種方式，否則，不推薦這種方式。
額外標簽法，這是w3c推薦的解決方案，但是不推薦，因為html的原則是寫出語義化的標簽，這種方式會額外增加無意義的標簽。
first-child1
first-child2
父元素的overflow屬性（開啟元素的BFC）：
.clearfix{
overflow: hidden;
}使用這種方式，屬性值可以是非visible（hidden/auto/scroll）中任意，但是建議用hidden。
這種方式副作用較小，這種方式在ie6中不支持，可以外加zoom: 1;
.clearfix{
overflow: hidden;
zoom: 1;/*針對ie6*/
}單偽元素after清除浮動（開啟元素的BFC）：
.clearfix::after{
content: "";/*偽元素內容為空*/
display: block;/*非默認的就行，也可以是table等等*/
height: 0;/*偽元素高度為0，不影響其他元素*/
clear: both;/*清除浮動*/
visibility: hidden;/*不可見*/
}
.clearfix{
zoom: 1;/*ie6元素沒有BFC模式，但是這句代碼會開啟ie6中的hasLayout模式，只在ie中支持*/
}這種方式現在使用比較廣泛，很多大網站都是使用這種方式，副作用較小，只需要在配合處理ie6就可以了。
雙偽元素清除浮動（開啟元素的BFC）：
.clearfix::before,.clearfix::after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;/*ie6元素沒有BFC模式，但是這句代碼會開啟ie6中的hasLayout模式，只在ie中支持*/
}這種做法寫法比較麻煩，也不推薦。
清除浮動對父元素的影響后的效果：
根據W3C的標準，在頁面中元素都一個隱含的屬性叫做Block Formatting Context，簡稱BFC，該屬性可以設置打開或者關閉，默認是關閉的。
當開啟元素的BFC以后，元素將會具有如下的特性：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1407.html
摘要：那我們舉個栗子當先聲明一個元素向左浮動時，由于脫離文檔流，這個元素的右邊就會空出一片空間，空間的長寬與浮動元素長寬相同?？偨Y總結下來，浮動與清除浮動的順序關系如下設置元素浮動，元素脫離文檔流，不計算高度。 本文主要探討兩個問題： 為什么CSS設置浮動會引起父元素塌陷 為什么設置clear:both能清除浮動，并撐開父元素。 起因 CSS的浮動，算是我在寫網頁時用的最多的屬性之一。但...
摘要：講清除浮動屬性值清除左右元素浮動對本元素造成的影響。代碼導航條解決高度塌陷問題最終版利用一個占位，清除浮動對它的影響從而實現解決高度塌陷的問題，但是此方法會在頁面結構中加入一個占位標簽，影響源碼閱讀。 63講 導航條css樣式 導航條 *{ margin:0px; padding:0px; } .nav{ /*去除每個前的大圓點*/ list...
摘要：講清除浮動屬性值清除左右元素浮動對本元素造成的影響。代碼導航條解決高度塌陷問題最終版利用一個占位，清除浮動對它的影響從而實現解決高度塌陷的問題，但是此方法會在頁面結構中加入一個占位標簽，影響源碼閱讀。 63講 導航條css樣式 導航條 *{ margin:0px; padding:0px; } .nav{ /*去除每個前的大圓點*/ list...
摘要：包裹性所謂包裹性，其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。 float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當就會出現意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優秀的前端開發人員，需要有刨根問底的精神，...
摘要：清除浮動，為何要清除浮動浮動效果會帶來不好的影響子元素浮動會帶來父元素高度塌陷。，清除浮動的兩大基本方式，運用清除浮動。元素流入頁面時，在這個元素左邊右邊或兩邊不允許有浮動內容。除了是用來清除浮動的，其它代碼都是為了隱藏掉生成的內容。 清除浮動 1，為何要清除浮動 浮動效果會帶來不好的影響： 子元素浮動會帶來父元素高度塌陷。具體解釋：當浮動框高度超出包含框時，包含框不會 自動伸高 來閉...
閱讀 2226·2023-04-26 01:57
閱讀 3253·2023-04-25 16:30
閱讀 2330·2021-11-17 09:38
閱讀 1078·2021-10-08 10:14
閱讀 1388·2021-09-23 11:21
閱讀 3686·2019-08-29 17:28
閱讀 3457·2019-08-29 15:27
閱讀 950·2019-08-29 13:04
