关于高度塌陷的解决方法及优缺点

1.给父元素设置一个固定高度
缺点：违背高度自适应原则，不够灵活，不推荐使用。

2.给父元素添加属性：overflow：hidden；
优点：浏览器好支持，简单；
缺点：当子元素有定位属性时，设置了之后，超出部分会被隐藏掉

3.在最后一个浮动元素之后添加一个块元素 来清浮动：clear:both;
优点：所有浏览器都支持，并且容器溢出不会被裁剪；
缺点：在页面中添加无意义的div，容易造成代码冗余。

4.万能清除法：配合第二种方式通过伪元素实现
clear:after{content:"";clear:both;display:block;visibility:hidden;}
优点：不会造成代码冗余，剩余代码性能优化，推荐使用。

除此之外，还有一类比较特殊，那就是BFC(overflow:hidden也包含在BFC里)，什么是BFC呢
BFC (Block fomatting content)是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

举例：* 脱离的文档流的元素

• float:float left/float right
• position:absolute/fixed
• Overflow:hidden
• Display:inline-block
• BFC都能解决margin-top向上传递和高度塌陷问题.