height collapse issue:

  1. 由float引起的高度塌陷问题的解决 https://zhuanlan.zhihu.com/p/27671651 在文档流中，父元素的高度默认是被子元素所撑开的，也就是说子元素有多高，父元素就有多高。但是当为子元素设置浮动以后，子元素将完全脱离文档流，脱离文档流后子元素将无法撑起父元素的高度，这时就会导致父元素高度塌陷。由于父元素的高度塌陷后，父元素下面的元素就会向上移动，这样将会导致整个页面的布局混乱。 方法一： 可以将父元素的高度写死，以避免出现高度塌陷的问题，但是一旦将父元素的高度写死，父元素的高度则无法自适应子元素的高度，所以这种方法我们不推荐使用。 方法二： 根据W3C的标准，在页面中都有一个隐藏属性叫做 Block Formatting context，简称BFC。该属性可以设置打开或关闭，默认是关闭的。 当元素开启BFC后将会有如下特性： 1.父元素的垂直外边距不会和子元素重叠 2.开启BFC的元素不会被浮动元素所覆盖 3.开启BFC的元素可以包含浮动元素 开启元素的BFC 1.设置元素浮动（对应解决方法： 将父元素也设置为Float） 2.将元素设置为绝对定位 3.将元素的display属性设置为inline-block
  2. 将元素的overflow属性设置一个非visible的值 但是在IE6及其以下的浏览器中并不支持BFC，所以使用这种方法并不能兼容IE6，在IE6中虽然没有BFC但是它有另外一个隐藏属性叫hasLayput，将元素的zoom值设置为1即可开启。 zoom表示放大的意思，后面跟着一个正整数，写几就是将元素放大几倍 zoom这个样式只在IE中支持，其他浏览器并不支持。
    使用开启BFC的方式解决父元素高度塌陷时，我们一般采用将overflow的值设置为hidden，并且将zoom的值设置为1，此时就会存在一定的副作用。 方法三： 在出现高度塌陷父元素的子元素的最后面加上一个空白的div元素，并且设置其空白元素的相应属性（清除浮动）在使用这种方法去解决高度塌陷时，也会存在一个问题，因为此时我们是在结构中新加了一个元素出来，而这个元素除了解决这个问题没有其他任何意义，还会在页面中添加多余的结构。 方法四： css样式中操作，利用after伪类选择器在父元素后面添加clear:both, display:block的空元素。
  3. 由绝对定位引起的高度塌陷问题使用CSS无法修复，可以使用JS。