css clear 运用

控制相邻的浮动BOX的排列——clear
功能说明：控制相邻的浮动BOX的排列。
可 取 值：none|left|right|both|inherit
初 始 值：none
应 用 到：块级元素。
可否继承：否。
详细解释：
① 当clear属性应用于非浮动的块级BOX时，属性值的含义如下：
left：生成的BOX的顶边距将增加，直到它的顶部边缘出现在文档中之前元素产生的任何向左浮动的BOX的底外边缘之下。
right：生成的BOX的顶边距将增加，直到它的顶部边缘出现在文档中之前元素产生的任何向右浮动的BOX的底外边缘之下。
both：生成的BOX将移到源文档中之前元素产生的浮动BOX之下。
none：相当于浮动，BOX的位置没有约束。
② 如果clear属性设置在浮动元素上，那么将导致对浮动定位的规则做修改，因此加入了以下额外的约束：
【浮动的顶部外边缘必须在所有之前的左浮动BOX的底部边缘之下（设置clear:left），或者必须在所有之前的右浮动BOX的底部边缘之下（设置clear:right），或者两者都要（设置clear:both）