浮動帶來的影響:浮動之后,后面的元素會上去補位置;導(dǎo)致父元素的高度降低,這種情況被稱為:高度塌陷解決高度塌陷方法如下:
前情描述:父元素不設(shè)置高度,子元素有自己的高度,當(dāng)給前面的子元素添加浮動之后,后面的子元素會上去補位置,補位完成之后,父元素的的高度會降低,這種情況被稱之為高度塌陷。
情況1:父元素添加高度
情況2:給后面的子元素添加清楚浮動,不上去補位置,clear:both
情況3:如果只有一個子元素,添加浮動之后,父元素高度就會降低為0
如何解決高度塌陷:
給父元素添加oveflow:hidden
給浮動子元素后面悄悄的補一個元素,然后給這個補位元素,清除浮動,
記住:補位元素必須是一個塊級元素,行內(nèi)元素清楚不了浮動
```CSS
/*情況4:萬能清除法*/
.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)驗,采用全程面授高品質(zhì)、高體驗培養(yǎng)模式,擁有國內(nèi)一體化教學(xué)管理及學(xué)員服務(wù),助力更多學(xué)員實現(xiàn)高薪夢想。