什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
Example验证:
1、浮动元素之后的元素将围绕它，浮动元素之前的元素将不受到影响
这里前面两个div (aaa,bbb)没有收到浮动影响，浮动图片后面的两个div（ccc,ddd)要围绕浮动元素布局，而且浮动元素没有撑开父元素高度。
怎么个围绕法？可以这么理解，后面的元素从去除浮动元素占据的空间后开始围绕布局（默认static布局）！一般浮动元素不会撑开父元素的高度，但是也可能会帮助撑开父元素的高度！对比上一图和下一图可知，看下图：
2、clear 属性规定元素的哪一侧不允许其他浮动元素
这里的div(ddd)设置了两侧清除浮动，即div元素ddd两侧不能出现浮动。
span元素设置清除浮动有效吗？ 答案是无效！看下图：
3、浮动导致的常见问题请参考
