3 column layout by float

  1. Html 布局为 center放在最后， 左float left， 右float right，中间设置margin-left, margin-right； 优点是实现简单，容易理解 缺点是，center在html中要放在最后，如果左右内容过多，会导致center部分加载缓慢；

  2. Html布局为center放在最前面 Center内容部分要包裹在一个div里面，此div float，三者都float left，利用float + 负margin实现 优点是，center部分放在最开始，会使得页面主要内容优先加载； 缺点是，涉及到float+负margin，理解起来有一定的难度

  3. Html布局为原始布局，即左中右 中间center要被外层div包裹，此外层div为float，内层为真正的内容部分 三者都float，利用float + 负margin实现 这种方式总体上既不具备center先行的优点，同时有拥有 float + margin难以理解的缺点，唯一的好处就是html是按照日常的顺序书写的。

注意：
Float具有两个特点：
第一， Float具有包裹性
既一旦设置float，其区域大小就会包裹内容大大小，因此不能够再自适应屏幕宽度，因此为解决此问题，在2，3中将内容区包含在float div中，虽然float div不可以自适应区域宽度，但是内部内容区非float，可以自适应区域宽度。

第二， Float会造成高度塌陷
导致父元素高度不会包含浮动元素，关于这个问题的解决方法有很多种，其中最常用最简单的即使用
Wrap::after clear both的方法。

关于float + margin要注意理解：

  1. 如果对一个浮动的元素使用负边距，它会产生一个空白，其他元素(must float element?)就可以覆盖这一部分。
  2. 当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,
  3. 当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移。

2 column layout by float :

内容列content，侧栏列aside，其中aside宽度固定，content列宽度根据浏览器自适应。
仿照三列布局，使用float实现2列布局就很容易实现了，

根据html布局，同样可以分为两种：

  1. Html 布局为，不论aside放左或右， content 都放在最后， aside放前，
    只需根据左或右对aside设置float left or right，相应的设置content margin-left or margin-right既可
    优点是实现简单，容易理解； 缺点是，content在html中放在最后，如果aside内容过多，会导致content部分加载缓慢；

  2. Html布局为content放在最前面 ，content内容部分要包裹在一个div里面，
    此div float，无论左右侧栏，aside都放在content后面，利用float + 负margin实现
    优点是，content部分放在最开始，会使得页面主要内容优先加载； 缺点是，涉及到float+负margin，理解起来有一定的难度；