css盒子塌陷及其解决方法

说到底就是清除浮动么

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;
}