关于元素塌陷的问题

在对页面进行布局时，经常会使用float 或者 position 属性，会导致子元素脱离文档流，使父元素高度塌陷的问题。
例如：

<div class="box1">
	<div class="box2">
	</div>
</div>
<style>

当box2脱离文档流之后，会导致box1高度塌陷，在网页中不会被现实出来，从而布局也会出现混乱。
此时可以对box1开启属性，overflow：hidden/auto/scroll; 都可以解决高度塌陷问题，但是auto和scroll都会在页面显示特有的样式，所以在解决简单的高度塌陷时，可以使用overflow:hidden;
但是overflow：hidden；样式在布局时有可能也会被使用，这样就造成冲突问题。
所以此时可以使用clear属性，当box后面存在一个块级的兄弟元素时，调用clear:both;属性，也可以解决高度塌陷问题。
但是，我们并不像在盒模型中在添加多余的盒子，此时可以使用伪类选择器，在box1的最后面使用伪类选择器::after定义一个空的块级盒模型。

	<style>
		.box1::after{
					content : "";
					display : block;
					clear:both;
				}
	</style>

此时box1的高度塌陷问题也可以得到完善的解决。
当然为了解决兼容性问题，可以为box1加上一句代码，使其兼容IE浏览器的高度塌陷问题。

	.box1{
		zoom : 1;
	}

然而，此时还存在一个问题，就是.box1和.box2在上外边距重叠的时候，无论为哪个元素设置一个上外边距，都会导致两个元素同时向下移动。
当然解决这个问题的方法也有很多，可以在父元素和子元素之间添加任意一个非空的标签或一个字符串还有一个外边框，都可以使外边距重叠导致的问题清除，但是我们在布局时不想添加一些无用样式，此时也可以使用伪类选择器::before，在.box1的前面添加一个空的字符串，然后将该字符串变为inline-block/block,都可以使该问题去除

	.box1::before{
			content:"";
			display:inline-block/block;
		}

所以，将以上代码综合起来，既可以解决高度塌陷，又可以解决上边距重叠问题

	.box1::before,
	.box1::after{
			content:"";
			display:block;
			clear:both;
		}
	.box1{
		zoom:1;
		}
	```