CSS布局篇奥义 - 浮动详解

        之前写过一篇CSS布局简要，仅说了大概要点，不怎么详细，而前几天整理了下布局常用的浮动元素的知识点，该篇便将其理清。把浮动元素的关键点理清后，常用的两栏布局与三栏布局都能理解的更为透彻。

1.生成三个 div ，box1 包裹住 box2 与 box3 ，box1 的高度是由内部文档流元素的高度撑起来的，都是块级元素，各自占满行，所以 box1 的高度由 box2 与 box3 的高度相加，为500px；

2.为其添加浮动元素，实现左右浮动；

        视觉上的左右浮动在这一步已经初步实现了，但是却出现了一个奇怪的现象，原本将两个盒子包裹住的 box1 却变成了一条黑色线条，其实这是浮动元素生效所导致的。 box2 和 box3 添加浮动元素后，就如字面上的意思那样——浮动起来了，这两个 div 脱离了 box1 的包裹， box1 感受不到内部的块级元素便收缩回原本的模样。

        2.1    为了更加直观，再贴两张图；

   a.    box2 不浮动，box3 浮动 

b.    box2 浮动， box3 不浮动

        图b里，box2 浮动起来，并添加60%的透明度后，能明显观察到 box3 是在 box2 的底下的；

3.浮动部分结束了，但是还存在一个问题，要如何让 box1 继续将 box2 和 box3 包裹住呢？这时便需要实现一个清除浮动的效果，见下图；

4.在理解浮动原理后，要实现两栏布局还是三栏布局就很轻松啦！