高度塌陷和BFC

高度塌陷问题：
在浮动布局中，父元素的高度默认是被子元素撑开的，
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。
父元素高度丢失以后，其下的元素会自动上移，导致页面布局混乱。
所以高度塌陷是浮动布局中比较常见的一个问题，必须要进行处理。
BFC (Block Formatting Context) 块级格式化环境：
-BFC 是一个css中的一个隐含的属性，可以为一个元素开启BFC。开启BFC该元素会变成一个独立的布局区域
-元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素所覆盖。
2.开启BFC的元素子元素和父元素外边距不会重叠。
3.开启BFC的元素可以包含浮动的子元素。
-可以通过一些特殊方式来开启元素的BFC：
1.设置元素的浮动(不推荐)
2.将元素设置为行内块元素(不推荐)
3.将元素的overflow设置为一个非visible的值。
-常用方式，为元素设置overflow：hidden 开启其BFC，以使其可以包含浮动元素。

clear属性：
由于box1的浮动，导致box3位置上移，也就是box3受到了box1浮动的影响，位置发生了改变。
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，我们可以通过clear属性来清除浮动元素对当前元素所产生的影响。
clear
-作用：清除浮动元素对当前元素所产生的影响。
-可选值：
left 清除左侧浮动元素对当前元素的影响。
right 清除右侧浮动元素对当前元素的影响。
both 清除两侧中最大影响的那侧。
-原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。
使用after伪类解决高度塌陷：

clearfix
clearfix 这个样式可以同时解决高度塌陷和外边距重叠问题，当你在遇到这些问题时，直接使用clearfix这个类即可.