高度塌陷的解决方法

解决高度塌陷的方法

1.overflow

BFC(Block Formatting Context)块级格式化环境
	BFC是一个CSS中的隐含属性，可以为一个元素开启BFC该元素就会变成一个独立的布局区域。不被浮动元素盖住，兄弟级的话会并排显示。
1.开启BFC
	元素开启BFC的特点：
		1.开启BFC的元素不会被浮动元素所覆盖；
		2.开启BFC的元素子元素与父元素外边距不会重叠；
		3.开启BFC的元素可以包含浮动的子元素
	可以通过一些特殊的方式开启BFC：
		1.设置元素的浮动；（不推荐，有高度没有宽度了）
		2.将元素设置为行内块元素；（不推荐，有高度没有宽度了）
		3.将元素overflow设置为一个非visible的值，一般设置为 overflow:hidden;

2.clear

作用：清除浮动元素对当前元素所产生的影响。
	可选值：
		left 清除左边浮动元素对当前元素的影响；
		right 清除右边浮动元素对当前元素的影响；
		both 清除两侧浮动元素对当前元素中最大的影响。
原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，使其位置不受其他元素影响。凭空加上一个标签，使用HTML解决了CSS的问题（不可取）。
		比如：

<div class="box1" style="10px red solid">
	<div class="box2" style="float: left width: 200px height: 200px background-color: orange"></div>
</div>

此时box1出现高度塌陷问题，clear解决方法：

<div class="box1" style="10px red solid">
	<div class="box2" style="float: left width: 200px height: 200px background-color: orange"></div>
	<div class="box3" style="clear: both"></div>
</div>

此时box3会自动添加一个margin-top = 200px将盒子撑开。

3.after伪类元素

.box1::after{
	content='';
	display:block;
	clear:both;
}

原理：利用after伪类项在box1后面添加一个伪类元素，再将其从行内元素转换成块元素，然后再清除浮动影响。

4.clearfix

==解决外边距重叠==
什么是外边距重叠：子元素和父元素相邻的垂直外边距发生重叠，子元素的外边距会传递给父元素。

.box1 {
	width: 200px;
	height: 200px;
	background-color: red
}

.box2 {
	width: 100px;
	height: 100px;
	background-color: orange;
}
/* 创建clearfix样式同时解决高度塌陷和外边距重叠的问题,使用时直接引用即可*/
.clearfix::before,
.clearfix::after {
	content: '';
	display: table; // 解决外边距重叠
	clear: both; //解决高度塌陷
}