浮動(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沒有文本的話則下面的代碼可以省略*/

width:0px;

height:0px;

overflow:hidden;

visibility:hidden;

font-size:0px;

}

　　更多關(guān)于前端培訓(xù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)想。