1.什么是场景下会出现元素高度塌陷：

  当子元素有浮动，父元素没有设置高度的时候，父元素会出现高度坍塌。   注：加了浮动的子元素不会撑开父元素的高（height）或者是最小高度（min-height）。      

2.如何解决高度塌陷呢？

  目前我们有三种方法可以解决父元素高度塌陷问题。
  #. 第一种：给出现高度塌陷的父元素添加样式：overflow:hidden;
      原理：给父元素添加了overflow:hidden;会触发一个 BFC（布局逻辑）
      BFC规定：计算BFC高度的时候，会把浮动元素也参与计算。
      注：使用overflow:hidden;会有弊端，它会将定位在当前元素外围的内容给隐藏掉。
  第二种：在浮动元素的同级最下方添加一个空的标签，给标签设置指定样式。.标签名{clear:both;}
       原理：在添加的空标签里面设置样式：clear:both，它会忽略上方同级添加浮动元素留出来的空间，在父元素的最底下显示，继而撑开父元素的高度。
    第三种：万能清除法（推荐使用可以兼容IE6等低版本）
       随便写个类库 指定一个伪元素::after的方法清除。
        .clear_fix::after{ content:""; clear:both; display:block; height:0; overflow:hideen; visibility:hideen; }
        .clear_fix{         zoom:1;         }