页面布局的宽高自适应

宽高自适应
    概念：根据设备、分辨率不同，有不一样的排版布局。
    1.宽度自适应
        1.不设置宽度
        2.使用百分比
        3.使用 min-width 或者 max-width;
            min-width:*px;   设置最小宽度
            max-width:*px;   设置最大宽度

    2.高度自适应
        1.不设置高度

            注意：如果子元素有浮动，会高度塌陷
            清除浮动：
                1.给浮动元素的父亲添加 overflow:hidden;
                2.给浮动元素添加一个空的兄弟元素div,给兄弟一个类名clear,设置样式 clear:both;

                    浮动元素
                    <div class='clear'></div>
                    css中  .clear{clear:both;}

                3.给浮动元素的父亲添加类名 cleafix,设置样式 
                    .clearfix:after{
                        content:'';
                        display:block;
                        height:0;
                        clear:both;
                    }