1.原因在文档流中，父元素的高度默认被子元素展开，即子元素的高度为父元素的高度。但是，当为子元素设置浮动时，子元素将完全脱离文档流。这时候子元素就会撑不住父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷，父元素下的所有元素都会上移，造成页面布局混乱。2、因此，我们在开发的时候一定要避免高度塌陷的问题。1、我们可以硬编码父元素的高度来避免崩溃的问题，但是一旦硬编码了高度，父元素的高度就不会自动适应子元素的高度，所以不推荐这种方案。2、根据W3C标准，页面中的元素有一个隐式属性，称为BlockFormattingContext，简称BFC。该属性可以设置打开或关闭，默认关闭。(1)当一个元素的BFC开启时，该元素将具有以下特点：父元素的垂直外边距不会与子元素重叠。打开BFC的元素不会被浮动元素覆盖。打开BFC的元素可以包含浮动的子元素（二）如何打开元素的BFC并设置元素浮动使用这种方法打开，虽然可以打开父元素，但是会导致父元素丢失，使用这种方式也会导致下层元素上移，无法解决设置元素绝对定位的问题将元素设置为inline-block可以解决问题，但是会导致宽度为丢失的。不推荐使用此方法。将元素的overflow设置为不可见值推荐方法：将overflow设置为hidden是启用BFC方式副作用最小的，但是IE6及以下浏览器不支持BFC，所以该方式不兼容IE6。虽然IE6中没有BFC，但是还有一个隐含的属性叫hasLayout。该属性的作用与BFC类似。IE6浏览器可以通过开启hasLayout来解决这个问题。有很多方法可以打开它。我们直接用副作用最小的那个：直接把元素的zoom设置为1zoom表示放大，后面跟一个值，在元素上写几次放大zoom:1表示不放大在元素上，但是这个样式可以用来开启hasLayout缩放样式，只在IE中支持，其他浏览器不支持最终兼容方案。clearfix{溢出：隐藏；缩放：1；}3.通过在高度折叠的父元素末尾添加空白div，然后将其清除为浮动，但会增加页面的冗余结构。由于这个div没有浮动，所以可以拉伸父元素的高度，然后清除浮动，这样就可以通过这个空白的div来拉伸父元素的高度，基本没有副作用。这种方法虽然可以解决问题，但是会给页面增加冗余结构。最终解决方案.clearfix{clear:both;}4。通过after伪类在高度折叠的父元素末尾添加一个空白块元素，然后清除浮动，这样页面就不会添加多余的结构。这样做和添加一个div的原理是一样的，可以达到同样的效果，而且不会给页面添加多余的div，这是我们最推荐的方式，几乎没有副作用。clearfix:after{//添加一个内容content:"";//转换为块元素display:block;//清除两边的浮动clear:both;}IE6不支持after伪类，需要在IE6中使用hasLayout来处理.clearfix{zoom:1;}.clearfix:after{内容：“”；显示：块；clear:both;}5、子元素和父元素相邻的垂直边距会重叠，子元素的边距会传递给父元素。使用emptytable标签可以隔离父子元素的外边距，防止外边距重叠，解决父子元素外边距重叠。box1:before{内容:"";display:table可以设置一个元素为tabledisplay}解决父元素高度塌陷.clearfix{zoom:1;}.clearfix:after{content:"";显示：块；clear:both;}修改后的clearfix是一个多功能解决方案，可以解决高度塌陷，保证父子元素.clearfix{zoom:1;}.clearfix:before,.clearfix:after{content:"";显示：表格；明确：两者；}
