整理自撩課學(xué)院（www.itlike.com）的視頻
一、產(chǎn)生原因
父元素在文檔流中高度默認(rèn)是被子元素?fù)伍_的，當(dāng)子元素脫離文檔流以后曹步，將無法撐起父元素的高度，也就會(huì)導(dǎo)致父元素的高度塌陷
二休讳、后果
父元素的高度一旦塌陷, 所有標(biāo)準(zhǔn)流中元素的位置將會(huì)上移讲婚，導(dǎo)致整個(gè)頁面的布局混亂
三、解決辦法
方案一：開啟父元素的BFC
1俊柔、BFC是什么筹麸？
1.1 Block Formatting Context——塊級(jí)格式化環(huán)境
1.2 BFC是元素的隱含屬性，默認(rèn)是在關(guān)閉狀態(tài)的雏婶∥锔希可以通過一些特殊的樣式，來開啟BFC
2留晚、開啟BFC以后元素將會(huì)具有如下特性：
2.1 父元素的垂直外邊距不會(huì)與子元素重疊
2.2. 開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
2.3 開啟BFC的元素可以包含浮動(dòng)子元素
3酵紫、開啟BFC的方式：
3.1 設(shè)置元素浮動(dòng)
3.2 設(shè)置元素絕對(duì)定位
3.3 設(shè)置元素的類型為inline-block
3.4 設(shè)置overflow為一個(gè)非默認(rèn)值，一般都是使用overflow:hidden來開啟BFC 错维！最推薦奖地！
方案二：添加元素
1、具體方式赋焕？
在塌陷的父元素的最后添加一個(gè)空白的div参歹，然后對(duì)該div進(jìn)行清除浮動(dòng)
<div id="box1">
<div id="box2"></div>
<div style="clear:both"></div>
</div>
2、存在問題隆判？
使用這種方式會(huì)在頁面中添加多余的結(jié)構(gòu)
3犬庇、什么是清除浮動(dòng)？
clear可以用來清除其他浮動(dòng)元素對(duì)當(dāng)前元素的影響
可選值：
1侨嘀、none械筛，默認(rèn)值，不清除浮動(dòng)
2飒炎、left埋哟，清除左側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
3、right，清除右側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
4赤赊、both闯狱，清除兩側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
方案三：使用after偽類（最推薦）
使用after偽類，向父元素后添加一個(gè)塊元素抛计，并對(duì)其清除浮動(dòng)哄孤。該種方式的原理和方法二原理一樣，但是不用向頁面中添加多于的結(jié)構(gòu)吹截。
.clearfix:after{
content:"";
display:block;
clear:both;
}
完善高度塌陷
子元素和父元素相鄰的垂直外邊距會(huì)發(fā)生重疊瘦陈，子元素的外邊距會(huì)傳遞給父元素，可以在子元素前加上<table>標(biāo)簽
<div>
<table><table>
<div>子元素<div>
</div>
將它與clearfix:after結(jié)合波俄，如下
.clearfix::before,
.learfix::after {
content:'';
display:table;
clear:both;
}
