2019-12-24

高在开发的过程中，我们往往会使父级的高度自适应（没有固定高度，高度由子级撑开），但是有时需要子级浮动（float）,这时的子级会脱离文档流，子级不会再把父级的高度撑开了。这就是高度坍塌形成的原因。

结果如下：

解决方法：

1.方法：在父级上添加高度

优点：好理解

缺点：固定的布局，不能做到自适应

2.给父级添加    overflow:hidden

原理：触发了  BFC 

（块级格式化上下文）--   将浮动元素的高度参与计算

优点：简单，代码少

缺点：子元素含有定位属性，那么子级元素超出的部分会被隐藏

3.在最后一个浮动元素同级添加一个div，给div添加css声明

div{ clear:both;}      clear:left  /  right    /    both 

原理：表示清除上方预留出来的空间

优点：清除方便

缺点：代码多，HTML结构，代码冗余，造成排版影响

4.万能清除法

原理：表示清除上方预留出来的空间

方法:a.给含有高度塌陷的父级盒子添加类名clear-fix

  .clear-fix:after{

         content:"   ";

         clear:both;

         height:0;

         width:100%;

         overflow:hidden;

         display:block;

         visibility: hidden;

}

.clear-fix{zoom:1;/*兼容IE*/}

作者：踢爆地球

链接：https://www.jianshu.com/p/abc2499c646e

来源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。