float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
属性值：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
当同一排元素使用float：right时，左边的元素会先浮动到右边，如下图：
无浮动 float：right
当一个元素为块级元素，另外一个元素浮动时，浮动元素依旧会换行：
当有两个元素浮动，一个元素不浮动时。若不浮动的元素为块级元素，则会忽视浮动元素进行布局，如图：
若设置为内联元素，则该元素会在空白处环绕浮动元素，如图：
若是IE浏览器 8之前的版本，无论是块级元素还是内联元素都如下图：
不会忽视浮动。
若有多个长度不等的浮动元素，且容器宽度不够时：
第一行剩余空间不足以满足黄色框的宽度，于是黄色框下移。很有趣的是，黄色框并没有在灰色之下，而是在玫红色框之下，因为玫红色框高度比灰色少。
综上，当给元素设置浮动后，个人感觉该元素类似于拥有了display：inline-block属性。可以像块级元素一样设置margin、width、height，又可以使文本、内联元素紧随其后而不换行。
浮动也可能导致容器元素高度塌陷（容器不设置height的情况下）：
1.当容器内只有浮动元素，那么容器会塌陷：
很奇怪，IE7不会塌陷：
而当我把width去掉之后又塌陷了：
2.若将div3的浮动去掉，则：
容器撑开了，块级元素叠加（如上所说）。
3.若将div3改为display:inline
这是不是能说明：计算容器元素高度的时候，浮动元素相当于脱离了文档流（但其实并未真正脱离，因为内联元素还能环绕在其周围）。当然，我这里没有测试IE6 7。
clear
clear 属性规定元素的哪一侧不允许其他浮动元素。
说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
属性值：
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
怎么理解呢？就拿下面的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。
要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。
那么假如页面中只有两个元素div1、div2，它们都是右浮动呢？读者此时应该已经能自己推测场景，如下：
此时如果要让div2下移到div1下边，要如何做呢？
同样根据小菜定论，我们希望移动的是div2，就必须在div2的CSS样式中调用浮动，因为浮动只能影响调用它的元素。
可以看出div2的右边有一个浮动元素div1，那么我们可以在div2的CSS样式中使用clear:right;来指定div2的右边不允许出现浮动元素，这样div2就被迫下移一行，排到div1下边。
以上是两个物体同时浮动时使用clear属性的效果。若div1浮动，div2不浮动，又会有什么情况发生呢？
默认情况：
很奇怪，div2漂移上去被div1覆盖了，但是其中的内容却在div1的下面。。
使用clear:left或both后：
当div2设置display:inline时，默认情况：
对div2使用clear：left或both时，如上图，没有任何变化。