一篇文章解决CSS元素高度自适应__超全代码解析

一篇文章解决CSS元素高度自适应__超全代码解析

首先CSS中元素高度自适应分类：

NO1：相对于窗口自适应：
解决此类高度自适应方法：html,body{height:100%;}
(子元素50%可相对窗口一半)
具体代码和运行结果如下：


NO2：相对元素或者内容自适应：
在讨论该分类时，要弄清楚：
什么是“非浮动元素的父元素”？
什么是“浮动元素的父元素”？
答：当父元素的“儿子辈”元素中至少有一个浮动元素，该父元素为“浮动元素的父元素”；否则为非浮动元素的父元素。（子元素的子元素，即“孙子辈”浮动与否并不产生影响！！）

1、非浮动元素的父元素高度自适应：
实现方法：
方法1：不设置高度，或者高度设为height:auto;
（让内容撑开父元素）
缺点：内容过少时，布局不美观。

方法2：（常用）通过最小高度实现高度自适应
例： min-height:30px;
（完善了方法1中内容过少时布局不美观的问题，超出最小高度后便将元素撑开，实现高度自适应。）

方法3：给需要高度自适应的元素添加下列属性：

min-height：300px;
height：auto!important; //关键字过滤器
height:300px：

（方法3为兼容IE6浏览器写法）

2、浮动元素的父元素高度自适应：
当父元素不设置高度的时候，第一级子元素浮动后，（元素浮起）父元素塌陷。只要解决了父元素的塌陷问题，浮动元素的父元素高度自适应

解决方法：
方法1：给父元素添加 overflow：hidden；
（触发BFC，便可应用BFC显示规则去显示。）
弊端：只要父元素中的内容或元素超出父元素，就会被隐藏。

方法2：在最后一个浮动元素下方设置一个空元素，并且给它设置下列属性：

   clear：both；
   height：0；
   overflow：hidden；

弊端：会添加很多空标记，增加结构负担，产生代码冗余。

方法3：给父元素添加 display：table;
（让父元素转化和表格一个类型）
弊端：会改变当前元素的元素类型。（不推荐此类方法）

方法4：万能清除法（推荐）

  ：：after{conten：“”；
           clear：both；
           display：block；
           height：0；
           overflow：hidden；
           visibility：hidden；}

逆战班推荐“万能清除法”灵活使用如下：
在CSS中写好clear_fix 类的样式，下文元素需要万能清除法便给该元素设置该类即可。