Float
浮动的框只能向右或者向左浮动,直到它的外边缘碰到它的包含框或者另一个浮动框的边框为止,浮动框不在文档的普通流中,故而普通流中的块框就像不知道浮动框存在一样
上图中框 1 向右浮动,它是脱离文档流的,再看下图:
当框 1 作为浮动框向右浮动,它脱离文档流不占据空间,实际上就挡住了框 2 ,框 2 从视图中消失,三个框都作为浮动框向左移动时,就会如上图右边所示排列,这里特别要注意的是,如果三个框都向右移动时,从左到右将是框 3 、框 2 、框 1 排列,也就是在不浮动框时最前面的框 1 这个时候同样会在浮动的方向上保持最前面的位置,如下图:
Clear
它表示框的哪些边不可以挨着浮动框,在使用 clear 属性时,重点是理解它起作用的条件,设置这个属性的框是相对于它前面的浮动框说的,如果前面没有浮动框则没有任何作用:
Left: 它把元素推到前面生成的向左浮动的元素下面
Right: 它把元素推到前面生成的向右浮动的元素下面
注:在 IE 中对浮动元素和非浮动元素都可以应用 clear 属性,其他浏览器可能会有所不同,比如在 FF 中就只能应用于浮动元素