float布局

步骤：

1. 子元素加上 float: left 和 width
2. 在父元素上加 .clearfix

经验:

• 有经验者会留一些空间或者最后有一个不设 width
• 不需要响应式，因为手机上没有 IE，而这个布局是专门为 IE准备的

IE 6/7 存在双倍 margin bug, 两个解决办法（基本不用）：

1. 针对 IE 6/7 把 margin 减半

2. 加一个 display: inline-block

.clearfix:after {
    /* 清除浮动 */
    content: '';
    display: block;
    clear: both;
}

IE bug
/* margin 减半 && inline-block */
.class {
    margin-left: 10px;
    _margin-left: 5px;
    display: inline-block;
}

为什么要清除浮动

float demo

Tips：

• border 有时候会干扰尺寸，可以改成 outline
• 用 float 做平均布局时，可以在布局中增加一个x图层，其多余的右边距可以用 负的 margin 来改善布局