高在開(kāi)發(fā)的過(guò)程中甲抖，我們往往會(huì)使父級(jí)的高度自適應(yīng)（沒(méi)有固定高度控汉，高度由子級(jí)撐開(kāi)），但是有時(shí)需要子級(jí)浮動(dòng)（float）,這時(shí)的子級(jí)會(huì)脫離文檔流腥沽，子級(jí)不會(huì)再把父級(jí)的高度撐開(kāi)了。這就是高度坍塌形成的原因鸠蚪。
結(jié)果如下：
解決方法：
1.方法：在父級(jí)上添加高度
優(yōu)點(diǎn)：好理解
缺點(diǎn)：固定的布局料身，不能做到自適應(yīng)
2.給父級(jí)添加? ? overflow:hidden
原理：觸發(fā)了? BFC?
（塊級(jí)格式化上下文）--?? 將浮動(dòng)元素的高度參與計(jì)算
優(yōu)點(diǎn)：簡(jiǎn)單，代碼少
缺點(diǎn)：子元素含有定位屬性谢翎，那么子級(jí)元素超出的部分會(huì)被隱藏
3.在最后一個(gè)浮動(dòng)元素同級(jí)添加一個(gè)div隅熙，給div添加css聲明
div{ clear:both;}? ? ? clear:left? /? right? ? /? ? both?
原理：表示清除上方預(yù)留出來(lái)的空間
優(yōu)點(diǎn)：清除方便
缺點(diǎn)：代碼多，HTML結(jié)構(gòu)蘸鲸，代碼冗余妖谴，造成排版影響
4.萬(wàn)能清除法
原理：表示清除上方預(yù)留出來(lái)的空間
方法:a.給含有高度塌陷的父級(jí)盒子添加類(lèi)名clear-fix
? .clear-fix:after{
? ? ? ? ?content:"?? ";
? ? ? ? ?clear:both;
? ? ? ? ?height:0;
? ? ? ? ?width:100%;
? ? ? ? ?overflow:hidden;
? ? ? ? ?display:block;
? ? ? ? ?visibility: hidden;
}
.clear-fix{zoom:1;/*兼容IE*/}
作者：踢爆地球
鏈接：http://www.reibang.com/p/abc2499c646e
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處膝舅。
