CSS中关于浮动(float)和清理(clear)的使用总结

Float

    浮动的框只能向右或者向左浮动，直到它的外边缘碰到它的包含框或者另一个浮动框的边框为止，浮动框不在文档的普通流中，故而普通流中的块框就像不知道浮动框存在一样

 

上图中框 1 向右浮动，它是脱离文档流的，再看下图：

 

 

当框 1 作为浮动框向右浮动，它脱离文档流不占据空间，实际上就挡住了框 2 ，框 2 从视图中消失，三个框都作为浮动框向左移动时，就会如上图右边所示排列，这里特别要注意的是，如果三个框都向右移动时，从左到右将是框 3 、框 2 、框 1 排列，也就是在不浮动框时最前面的框 1 这个时候同样会在浮动的方向上保持最前面的位置，如下图：

 

 

Clear

    它表示框的哪些边不可以挨着浮动框，在使用 clear 属性时，重点是理解它起作用的条件，设置这个属性的框是相对于它前面的浮动框说的，如果前面没有浮动框则没有任何作用：

Left: 它把元素推到前面生成的向左浮动的元素下面

Right: 它把元素推到前面生成的向右浮动的元素下面

注：在 IE 中对浮动元素和非浮动元素都可以应用 clear 属性，其他浏览器可能会有所不同，比如在 FF 中就只能应用于浮动元素