高度塌陷问题以及解决方案

 高度塌陷问题：
  在浮动布局中，父元素高度默认是子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。而父元素的高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。

 BFC (Block Formatting Context) 块级格式化环境：

  BFC是一个CSS中的隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域。


 元素开启BFC之后的特点：
  1. 开启BFC的元素不会被浮动元素所覆盖。
  2. 开启BFC的元素子元素和父元素的外边距不会重叠。
  3. 开启BFC的元素可以包含浮动子元素。


 可以通过一些特殊的方法开启BFC：

  1. 设置元素的浮动 float:left（元素会脱离文档流，丢失宽度）
  2. 将元素设置为行内块元素 display: inline-block;(元素会丢失宽度)
  3. 将元素的 overflow 设置为非 visible，是常用的方式，常常设置为overflow:hidden; 开启其BFC，以使其可以包含浮动子元素


 clear属性：
  可以通过 clear 属性清除浮动元素对当前元素的影响。
  可选值：
   - left 清除左侧浮动元素对当前元素的影响。
   - right 清除右侧浮动元素对当前元素的影响。
   - both 清除两侧浮动元素中影响较大的浮动元素的影响。
  原理：
   设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。


 高度塌陷的最终解决方案：

  使用 ::after 伪类解决高度塌陷（注意：默认情况下 ::after 伪元素是一个行内元素）利用css使用样式解决样式的问题。

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

 垂直方向外边距折叠问题：

display:table; table可以隔开外边距，并且不占位置（空的）。

	.box1::before{
		content:'';
		display:table;
	}

综上：
  解决高度塌陷和外边距重叠问题的最终方法：

	.clearfix::before,
	.clearfix::after{
		content:'';
		display:table;
		clear:both;
	}