背景:浮動(dòng)元素會(huì)導(dǎo)致父元素高度坍塌毁葱,如果一個(gè)沒有高度的塊級(jí)元素的子元素浮動(dòng)的話,則這個(gè)塊級(jí)父元素的高度為0杉女,即父元素高度坍塌
解決方法:
一瞻讽、子級(jí)方法?
在子元素的最后添加一個(gè)高度為0的子元素,并且讓它清除浮動(dòng)
eg:
示例代碼
效果圖為:
未設(shè)置高度的父元素(紅)與150px高的子元素(黃)
二熏挎、父級(jí)方法
1.給父元素設(shè)置display:inline-block
display:inline-block
2.給父元素設(shè)置overflow:hidden
overflow:hidden
3.給父元素固定的高度
即計(jì)算各子元素高度后速勇,手動(dòng)給父元素固定高度,代碼略
4.利用偽元素:after坎拐,并且清除浮動(dòng)
利用偽元素:after