浮動(dòng)帶來(lái)的影響：浮動(dòng)之后，后面的元素會(huì)上去補(bǔ)位置;導(dǎo)致父元素的高度降低，這種情況被稱為：高度塌陷解決高度塌陷方法如下：
前情描述：父元素不設(shè)置高度,子元素有自己的高度,當(dāng)給前面的子元素添加浮動(dòng)之后,后面的子元素會(huì)上去補(bǔ)位置,補(bǔ)位完成之后,父元素的的高度會(huì)降低，這種情況被稱之為高度塌陷。
情況1：父元素添加高度
情況2：給后面的子元素添加清楚浮動(dòng)，不上去補(bǔ)位置，clear：both
情況3：如果只有一個(gè)子元素，添加浮動(dòng)之后，父元素高度就會(huì)降低為0
如何解決高度塌陷：
給父元素添加oveflow:hidden
給浮動(dòng)子元素后面悄悄的補(bǔ)一個(gè)元素,然后給這個(gè)補(bǔ)位元素,清除浮動(dòng),
記住:補(bǔ)位元素必須是一個(gè)塊級(jí)元素,行內(nèi)元素清楚不了浮動(dòng)
```CSS
/*情況4:萬(wàn)能清除法*/
.box:after{
content:"鐵牛最帥";
display:block;
clear:both;
/*如果上面的content沒(méi)有文本的話則下面的代碼可以省略*/
width:0px;
height:0px;
overflow:hidden;
visibility:hidden;
font-size:0px;
}
更多關(guān)于前端培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。
京公網(wǎng)安備 11010802030320號(hào)