元素高度自适应

元素高度自适应

关于元素高度自适应，我们通常可以把它分为两种情况：
1.非浮动元素的父元素高度自适应
2.浮动元素的父元素高度自适应

非浮动元素的父元素高度自适应

非浮动元素的父元素：该父元素内的最近一级的所有子元素都遵循文档流自上而下的排列顺序分布

实现高度自适应的方法：

1)可以给元素设置一个最小高度 min-height：value；_height：value；设置了最小高度当元素里的内容超出最小高度时即可实现高度自适应，当元素里的内容没有超出该高度时，又可以把这个元素支撑在这个高度。
height：value；是用来兼容IE6浏览器的，IE6不支持设置min-height，并且它自身就可以高度自适应，“”只能被IE6浏览器识别，所以在IE6浏览器元素里的内容超出_height设置的值时，他可以高度自适应，没超出则保持在这个高度。

2）给元素设置height：auto；让它高度自由显示，即实现高度自适应。

3）给需要高度自适应的元素添加以下属性：
{min-height：vaule；height：auto !important；height：vaule；}
!important； 关键字过滤器，具有最高优先级；ie6不支持；即其他浏览器优先执行height：auto ；IE6执行height：vaule；

浮动元素的父元素高度自适应

浮动元素的父元素：该父元素的子元素浮动从而脱离文档流实现左右排列的布局，并且浮动元素的父元素不设置高度的前提下，因其子元素浮动从而导致父元素高度塌陷。

高度塌陷可以给父元素一个固定高度来解决，但这不能让父元素实现高度自适应。

实现高度自适应的方法：

1）添加属性overflow：hidden；触发BFC，从而遵循BFC法则，可以实现高度自适应，但是当里面的内容超出父元素则会被隐藏。

2）在父元素里浮动元素的下方添加一个空的元素，并且给他设置属性clear:both；height:0；overflow:hidden；但存在的弊端是会添加很多空标记，从而增加了结构的负担，造成代码的冗余；

3）万能清除法：

比较推荐使用这种方法，之后在需要高度自适应的元素上添加一个class名class="clear_fix"即可。

4）给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；也可以实现高度自适应，但是会改变当前元素的元素类型，一般很少使用。

by 逆战班 ZT-ing