首先了解下什么是高度塌陷
- 作為前端開(kāi)發(fā)者都知道杯矩，在HTML 中父元素在沒(méi)有設(shè)置高度的時(shí)候拍柒，其默認(rèn)高度是會(huì)被子元素?fù)伍_(kāi)的嗜诀，也就是子元素有多高渐排，父元素就有多高炬太，但當(dāng)其所有子節(jié)點(diǎn)都浮動(dòng)的時(shí)候，就會(huì)脫離文檔流驯耻，此時(shí)父元素的高度就會(huì)丟失亲族。如果在沒(méi)有設(shè)置邊框?qū)傩缘那闆r下是比較難發(fā)現(xiàn)的，并會(huì)影響使布局變得混亂可缚，達(dá)不到預(yù)期布局霎迫。
<body>
<div class="parent">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="child child3"></div>
</div>
<div class="other"></div>
</body>
如上結(jié)構(gòu)在class="parent" 的子元素沒(méi)有設(shè)置浮動(dòng)時(shí)的效果預(yù)期應(yīng)該是如下所示的：
此時(shí)父元素的高度是等于三個(gè)子結(jié)點(diǎn)撐開(kāi)的高度。
當(dāng)給class=“parent”的三個(gè)子div設(shè)置了float: left的時(shí)候城看，如下圖所示女气，出現(xiàn)了頁(yè)面布局混亂，而class="parent"的這個(gè)父div的height變成了0测柠，它里面的三個(gè)子div是浮動(dòng)排列的炼鞠，而class="other"的這個(gè)div“跑到”它上面的元素的位置上去了缘滥，就好像它上面的元素都并不存在似的，這個(gè)就是“高度塌陷”問(wèn)題了 谒主。
解決辦法
想達(dá)到如下圖所示的布局效果：
Screen Shot 2019-03-17 at 10.31.55 AM.png
1. 方法一
在class=“parent”元素內(nèi)添加一個(gè)空的DIV標(biāo)簽朝扼，并設(shè)置如下CSS
.clear {
clear: both;
}
缺點(diǎn): 增加了無(wú)意義的標(biāo)簽。
2. 方法二
讓父元素本身也浮動(dòng)
缺點(diǎn): 雖然可以撐開(kāi)父元素霎肯，但會(huì)使父元素寬度丟失擎颖，而且導(dǎo)致下面的元素會(huì)上移，使與父元素相鄰元素的布局受到影響观游。
3. 方法三
通過(guò)給父元素添加:after偽類搂捧， 最推薦的方法
給父元素添加如下CSS樣式
.parent:after {
content: "."; /*生成內(nèi)容作為最后一個(gè)元素，至于content里面是什么沒(méi)有影響*/
display: block; /*使生成的元素以塊級(jí)元素顯示懂缕，占滿剩余空間*/
height: 0; /*避免生成的內(nèi)容破壞原有空間的高度*/
clear: both; /*閉合浮動(dòng)*/
visibility: hidden; /*使生成內(nèi)容不可見(jiàn)允跑，并允許可能生成內(nèi)容蓋住的內(nèi)容進(jìn)行點(diǎn)擊和交互*/
}
利用偽類來(lái)清除浮動(dòng)，其效果跟創(chuàng)建一個(gè)空的div并設(shè)置其為clear：both搪柑；是一樣的聋丝，只不過(guò)這里用偽類代替了空的div元素，不會(huì)影響任何其他樣式工碾，通用性強(qiáng)弱睦，覆蓋面廣。
