自适应与清除浮动

自适应

一屏网页：宽高同时100%(body和html)

宽度自适应

元素宽度设置为width:100%

百分比是一个相对单位，相对最近的父元素大小的改变而改变的一个单位

高度自适应

一屏网页：宽高同时100%(body和html)

html,body{
    width:100%;
    hieght:100%
}

最大高max-height

适用于一定高度分页

hieght:auto或者不写

父元素出现高度塌陷

高度塌陷就是，子元素设置浮动之后，父元素没有设置高度或者父元素需要高度自适应的情况：

子元素设置浮动，高度设置height:auto

解决方案

• 给父元素添加高

  • 缺点：不适合自适应的布局

• 直接给父元素添加float

  • 缺点：遇到高度自适应的时候就不好用了

• 给父元素设置overflow:hidden或者auto

  • 缺点：遇到定位就不太好用了（超出隐藏）

• 在浮动元素的下方，加一个非浮动的空盒子，给该盒子添加clear:both清除浮动

  .p1{
      clear:both;
  }
  

  • clear用于清除浮动，有3个值，left/right/both
  • 缺点：页面中太多的空标签会造成标签的冗余

• 万能清除法(推荐使用)

  给父元素添加clear公共类名，哪里需要清除，在哪里添加类名clear

  .clear:after{
  	content:"";
      display:block;
      height:0;
      clear:both;
      overflow:hidden;
      visibility:hidden;
  }
  
  
  /* 兼容IE6 */
  .clear{
  	zoom:1;
  }
  

• 给父元素添加浮动

缺点：需要解决新的浮动问题（不推荐）

• display:table

  缺点：产生未知bug

min-height 最小高度

兼容性问题

• 下划线过滤器，主要是做IE6兼容

min-height:300px
_height:300px;

• 关键字过滤器 关键字顺序不能换

min-height:300px;

/* 做高版本兼容  关键字过滤器  增加权重值   */
height:auto!important;

/* 兼容IE6在，在IE6中min-height就是height */
height:20px;