如何使用 float

  • 子元素上加 float：left 和 width
  • 父元素上加 .clearfix

    回头补示例代码

可参考 clear - MDN

经验

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

  • IE 6 / 7 存在双倍 margin的bug，解决方法可有两个：

    • 针对 IE 6/7 把 margin 减半

      1. margin-left: 10px;
      2. -margin-left: 5px;

    • 再加上一个 display: inline-block

  • float 需要程序员自己计算宽度，十分不灵活；
  • 手机页面傻子才用 float
  • float 应付 IE 足以

【特别提醒】

  • 如果图片下面有多余的东西，就在图片下写个 vertical-align:top;
  • 布局的时候调试的方法，有时候 border 会干扰宽度
    • 因为它会占 2 px，就把 border 改成 outline ；eg: outline: 1px solid red;
    • border-box 宽度包含 border
    • border 不论多宽都不会影响整体的宽度，只会影响内部宽度。
  • 如果是宽度固定的块级元素，那么会左边的 auto 的外边距和右边 auto 外边距就会直接让你居中（只对块级元素） ```css margin：0 auto；居中

这个写法更好： margin-left:auto; margin-right:auto; ```

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

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