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)

相关推荐