高度塌陷

高度塌陷

1：什么情况下会出现高度塌陷
         如果给子元素添加浮动，父元素没有高度，子元素因为脱离文档流，父元素高度没有被撑开，这种现象称为高度塌陷。
2：如何解决高度塌陷
      (1)为出现高度塌陷的父元素添加"overflow:hidden"
           原理:给父元素添加了overflow:hidden以后，触发了BFC规则"计算BFC高度的时候，里面的浮动元素也参与计算"
           弊端:“overflow:hidden"的本意为溢出隐藏，会隐藏掉溢出在元素之外的东西
      (2)在浮动元素的下面添加一个空元素,并给与这个空元素{clear:both}，让其无视上面浮动元素留下的预留空间。
           弊端:会出现很多没有意义的空元素，形成代码冗余。
      (3)万能清除法:
      出现高度塌陷的元素:after{
            content:”.";
            display:block;
            clear:both;
            height:0;
            overflow:hidden;
            visibility:hidden;
      }