CSS——float详解

1. float特性

浮动会破坏父元素高度，导致父元素的高度塌陷。在使用中应当适度使用。

2. 解决方法

• 在使用了float属性的元素后增加空div，给空div clear：both的属性。防止后面的元素向上浮动。

  <div style="height : 0px; clear : both "> </div>

• 利用CSS伪类，在其后追加clear:both的元素

  .clearfix:after{
      content:".";
      overflow:hidden;
      display:block;
      height:0;
      clear:both;
  }

  IE6/IE7:

      .clearfix:after{
          *zoom:1;
      }

• BFC/haslayout
  haslayout可能在IE6/IE7上呈现出混乱的布局。
  通常声明：
  
  • float:left/right
  • position:absolute
  • overflow:hidden/scroll(IE7+)
    使用时会触发浏览器的滚动条
  • display:inline-block/table-cell(IE8+)
    *zoom:1(IE6/IE7)

3. 自适应布局

• 单侧固定

  width+float
  padding-left/margin-left

• 自适应尺寸

  float
  display:table-cell(IE8+)
  display:inline-block(IE7)