相对元素或者内容自适应

如何实现元素高度自适应？
先思考这两个问题：
a、如果想实现元素高度自适应，高度能不能设置成固定的值？
b、如果高度不能固定，那该怎么设置呢？
第一种情况：
1）非浮动元素的父元素高度自适应
实现方法：
1、不设置高度，或者高度设置成 ： height:auto；
2、通过最小高度实现高度自适应 ： min-height:300px;_height:300px;
注：;_height:300px; 只有IE6 这个浏览器识别当前的属性，其他浏览器就都不识别了。



不设置height值时，浏览器默认height:auto;

第二种情况：
2）浮动元素的父元素高度自适应

		说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；
		
		怎么去解决？（只要解决高度塌陷的问题，父元素就能实现高度自适应了）

父元素内有两个浮动元，默认情况下，显示效果如图所示。

实现方法：
1、给父元素一个固定高度去解决高度塌陷问题
弊端：不能让元素高度自适应了。
2、overflow：hidden; 解决高度塌陷并能实现高度自适应的方法一；（遵循BFC的显示原则）


弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏。

3、在浮动元素的下方添加一个空元素，并且给他设置一下属性： 空标记：

clear:both;height:0;overflow:hidden;


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

4、display:table; 给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；


弊端：会改变当前元素的元素类型。

5、万能清除法：
:after{content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}


注：这是常用的一种对浮动元素高度自适应的设置方式，也是比较推荐的一种。