說到底就是清除浮動么

1-1 概念及原因

1、父盒子內部的元素跑到了外部
2、 為什么會出現盒子塌陷?

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

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

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

• overflow： auto，可能出現滾動條
• overflow： hidden，可能帶來內容不可見的問題

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

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

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

5、 使用before和after雙偽元素清除浮動

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