CSS技术清除浮动.doc

CSS技术清除浮动 当两个元素都设置了左浮动或右浮动时，元素会依次浮动在页面左边或者右边。但有时会希望元素都排列在页面的最左边或最右边，这时候就可以使用clear属性来清除浮动。clear属性是用来设置元素的左、右是否允许出现浮动对象。该属性有4个属性值，分别是none、left、right和both。其语法结构如下所示。 clear:none/left/right/both; 其中，none表示元素左右两边都允许出现浮动元素；left表示元素左边允许出现浮动元素；right表示元素右边允许出现浮动元素；both表示元素两边都不允许出现浮动元素。 【示例】下面的例子将3个 元素都设置为右浮动，并且左右两边都不允许出现其他的浮动元素。 style type text/css #f1 float:right;/*定义元素右浮动*/ background-color:#0FF; width:200px; clear:both;/*清除左右浮动*/ #f2 float:right; /*定义元素右浮动*/ background-color:#6F9; width:200px; clear:both;/*清除左右浮动*/ #f3 float:right;/*定义元素右浮动*/ background-color:#FFC; width:200px; clear:both;/*清除左右浮动*/ div id f1 定义元素在页面右边浮动 div id f2 定义元素在页面右边浮动 div id f3 定义元素在页面右边浮动 运行后效果如图1所示。 图1? 清除浮动运行结果图