height:100%; 不起作用的四种解决方法，子级溢出来父级却没有撑开

项目中遇到一个问题：
父级高度是auto，子级高度100%但是元素却无法撑满，总结了一下有下面三种方法，亲测有效：

1：给父元素设为块级并加固定高度

2： 父元素height:auto; overflow:hidden；

3： 不苛求兼容性的话父级display: flex; 就可以了

顺便说一下另外一个问题：

项目中父级高度是auto，但是子级溢出来父级却没有撑开，如下图：

两种可能：

一、使用了float

1. 在浮动结束的容器后面加上这段代码，清除浮动

<div style=”clear:both;”></div>

1. 在外层DIV（父级）的CSS里面加入以下CSS代码

overflow: auto;

二、使用了absolute

去掉position:absolute; 或者改成 relative；

上述两种情况都是属于 脱离文档流 的原因造成的，解决了这个，问题也就开朗啦～～