如何用最优方法实现宽高自适应？

宽高自适应
一、什么是宽高自适应？
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是宽高自适应。
二、自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
三、宽高自适应分为：
1、相对窗口和父元素的自适应写法
宽度：当块状元素不写宽度的时候，默认的宽度就是100%，是父元素的宽度的100%；也就是始终跟父元素是同宽的。width：100%。
默认情况下：如果给块元素加了绝对定位或者固定定位，它的宽度就不再是100%
显示了。也不会跟父元素同宽的，而是跟里面的内容同宽，如果元素里面没有内容，又没有定义宽高，这个时候，元素就不见了。
高度:当让元素的高度相对浏览器窗口显示百分比的值的时候，一定要给HTML和body设置高度100%。
2、相对元素或者内容自适应的写法
宽度:width:100%;
高度自适应
第一种情况:
非浮动元素的父元素高度自适应实现方法:
(1)不设置高度,或者高度设置成height:auto；
(2)通过最小高度实现高度自适应:
min-height:300px; _height:300px；
(3)给需要高度自适应的元素添加这些属性:
min-height:value；
height:auto!Important；
height:value；
第二种情况:
浮动元素的父元素高度自适应实现方法:
说明:当父元素不设置高度的时候,第一级子元素浮动后,父元素高度塌陷；
怎么去解决？（只要解决高度塌陷的问题,父元素就能实现高度自适应了）
（1）给元素添加overflow：hidden;属性，是解决高度塌陷并能实现高度自适应的方法一。（遵循BFC的显示原则）
弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏。
（2）在浮动元素的下方添加一个空元素，并且给它设置以下属性：空标记：
弊端：会添加很多空标记，增加结构负担，产生代码冗余。
（3）给父元素添加display：table；让父元素转换元素类型跟表格的特性一样；弊端：会改变当前元素的元素类型。
（4）万能清除法：给父元素添加以下属性：
:after{
content:“”；
clear:both；
display:block；
height:0；
overflow:hidden；
visibility:hidden；
}
说明：推荐使用万能清除法。