5.7.1 - CSS 布局 - float布局

浮动就是一个变态、魔鬼，自私自利且影响他人的混球。 —— 张鑫旭

如何使用float

• 子元素加上 float: left 和 width
• 父元素加上 .clearfix
• 就这些，没了！

代码示例

<div class="fatherElement">
  <div class="x clearfix">
      <div class="childElement"></div>
      <div class="childElement"></div>
  </div>
</div>

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.childElement{
  float: left;                    /* 子元素加float */
  width: 191px;                    /* 子元素宽度 */
     margin-right: 12px;     /* 子元素间距 */
}
.x{
  margin-right: -12px;    /* 巧妙使用负margin居中 */
}

至于 .clearfix 为什么这么写，可以参考clear - MDN，反正我是没看懂。

一些经验

• 有经验者会留一些空间或最后一个元素不设置width；
• 这个布局是为IE准备的，应付老版本IE足矣；
• 对于双倍margin的bug，解决方法可以参考老版本IE双边距问题；
• 手机页面傻子才用float；
• float需要程序员自己计算宽度，十分不灵活；

更多参考资料： CSS float浮动的深入研究、详解及拓展(一) - 张鑫旭 CSS float浮动的深入研究、详解及拓展(二) - 张鑫旭

部分资料来源：饥人谷 - 方方老师