浮动和清除浮动 float clear

发现一个写的很不错的blog
http://www.cnblogs.com/jiqing9006/

首先，大家知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的

流

如下图：
即使div1的宽度很小，div2也不会排在div1后面，因为div元素是独占一行的。
布局的基本出发点是：

如何在一行显示多个div元素

这就要用到浮动
浮动可以理解为：让某个div元素脱离标准流，但div1，div3，div4仍然在标准流中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。
如图：

图中，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1，div3，div4依次排列，成为一个新的流。又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了。
这里div2用的是左浮动（float：left），可以理解为漂浮起来后靠左排列，右浮动（float:right;）则是靠右排列。这里的左右说的是父元素的左右边缘。如果div采用右浮动，则有如下效果：

此时div2靠右边排列，不再遮挡div3.

浮动多个元素

我们把div2，div3都加上左浮动，如图：

同理，由于div2，div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4.
所以，当同时对div2，div3设置浮动之后，div3会跟随在div2后面，但是，div2在每个例子中都是浮动的，却并没有跟随到div1之后。因此：
假如某个div元素A是浮动的，如果A元素上一个元素也浮动的话，那么A元素就会跟随在上一个元素的后边（如果一行放不下这两个元素，那么A元素会被挤到下一行），如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
再举几个栗子。
把div2，div3，div4都设置成左浮动，效果如下：

把div2，div3，div4都设置成右浮动，效果如下:

把div2，div4左浮动，效果如下：

清除浮动

块级元素浮动之前，在标准流中是竖向排列的，而浮动之后，块级元素可以理解成横向排列。

清除浮动可以理解为打破横向排列。

clear:none | left | right | both
取值：
none：默认值，允许两边都可以有浮动对象。
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许有浮动对象
定义描述的真是抽象
根据上边的基础，假如页面中只有2个元素div1，div2，它们都是左浮动，如下：

此时div1，div2都浮动，根据规则，div2会排在div1后面，但我们仍然希望div2能排在div1下面，就像div1没有浮动，div2左浮动那样。
这是就要用到clear

对于css的清除浮动，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

要让div2下移，就必须在div2的css样式中使用浮动，本例中div2的左边有浮动元素div1，因此只要在div2的css样式中使用clear：left；来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

那么假如玉面中只有2个元素div1，div2，它们都是右浮动呢？

如果要让div2下移到div1下边，要？
我们希望移动div2，就必须在div2的css样式中调用浮动，因为浮动只能影响调用它的元素。
可以看出div2的右边有一个浮动元素div1，那么我们可以在div2的css样式中使用clear：right；来指定div2的右边不允许出现浮动元素，这样div2就被迫下移一行，移到div1下边。

原文链接:经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了