說(shuō)到底就是清除浮動(dòng)么

1-1 概念及原因

1、父盒子內(nèi)部的元素跑到了外部
2、 為什么會(huì)出現(xiàn)盒子塌陷?

• 當(dāng)父元素沒設(shè)置足夠大小時(shí)，而子元素添加了浮動(dòng)屬性，子元素就會(huì)跳出父元素的邊界（脫離文檔流）
• 當(dāng)父元素的高度為auto時(shí)，而父元素中又沒有其他非浮動(dòng)的可見元素時(shí)，父盒子的高度直接塌陷為0，稱： CSS高度塌陷

1-2 盒子塌陷的幾種解決方法：

1、 盒子大小寫死，給每個(gè)盒子設(shè)定固定的width和height
2、 父盒子添加overflow屬性

• overflow： auto，可能出現(xiàn)滾動(dòng)條
• overflow： hidden，可能帶來(lái)內(nèi)容不可見的問(wèn)題

3、 父盒子最下方引入清除浮動(dòng)塊
<br style="clear:both;">
4、 after偽元素清除浮動(dòng)

• 外部盒子的最下面設(shè)置clear屬性，再隱藏它
• 不用引入冗雜元素

.clearfix {
	*zoom: 1;
}
.clearfix::after{
	display: block;    /* 插入偽元素是行內(nèi)元素，要轉(zhuǎn)換為塊級(jí)元素*/
	height： 0;
	visibility: hidden;   /*content有內(nèi)容，將元素隱藏*/
	content: "";
	clear: both;
}

5、 使用before和after雙偽元素清除浮動(dòng)

.clearfix::before,.clearfix::after {
	content: "";
	display: table;
}
.clearfix::after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}