Flex布局⾼度塌陷的解决⽅案
Flex布局的⾼度塌陷
1.发⽣原因：
⽗元素不写⾼度完全由⼦元素撑起来的，但是⼦元素浮动时，⽗元素就会⾼度为0，造成了⾼度塌陷
2.解决⽅法：
⽅法⼀：给⽗元素添加声明overflow：hidden（优点：代码少、简单。缺点：只适⽤于⾼版本的浏览器，IE6不⽀持，不可以position定位配合使⽤，超过的会被隐藏）overflow：hidden的具体⽤法
【添加overflow：hidden来清除⼦元素的浮动。】
⽅法⼆：在浮动元素下⽅添加空div，并且给元素声明clear：both（优点：代码少，浏览器兼容好，只需要兼容 IE 浏览器，因为在IE兼容部分块元素会⾃带16px的⾼度，需要添加 height: 0;overflow: hidden; 缺点：需要添加多余的空标签并添加属性）
html的flex布局
【使⽤clear:both；清除了上⾯div设置的float: left;（浮动）】⽅法三：万能清除法
万能清除法⽅法四：给⽗元素添加浮动（缺点：添加了新的浮动问题。不推荐使⽤）
⽗元素添加浮动
原⽂