浮动清除.docVIP

浮动清除 浮动的自由性也给布局带来很多麻烦，CSS为此又增加了clear属性，它能够一定程度上控制浮动布局中出现的混乱现象。clear属性取值包括4个。 left：清除左边的浮动对象，如果左边存在浮动对象，则当前元素会在浮动对象底下显示。 right：清除右边的浮动对象，如果右边存在浮动对象，则当前元素会在浮动对象底下显示。 both：清除左右两边的浮动对象，不管哪边存在浮动对象，当前元素都会在浮动对象底下显示。 none：默认值，允许两边都可以有浮动对象，当前元素浮动元素不会换行显示。 关于浮动清除问题，有时候不好理解，部分设计师会误认为清除操作适用于不同类型对象，或是清除操作是把已经存在的浮动对象清除掉，还有的设计师误认为清除操作会对前面的浮动对象产生影响，如此等等都说明浮动清除是一个难懂的知识点，甚至不同浏览器对此解释也完全不同。 为了更好说明，我们通过示例来展开研究。请先输入下面的CSS布局代码： ?/*[浮动清除，参考示例6-10.html]*/span {/*定义span元素宽和高*/width:200px;height:100px;}#span1 {/*定义span对象1属性*/float:left;border:solid blue 10px;}#span2 {/*定义span对象2属性*/float:left;border:solid red 10px;clear:left; /*清除左侧浮动对象，如果左侧存在浮动对象，则自动在底下显示*/}#span3 {/*定义span对象3属性*/float:left;border:solid green 10px;} 然后，输入XHTML结构代码： ?span id=span1span元素浮动/spanspan id=span2span元素浮动/spanspan id=span3span元素浮动/span 显示结果： ? （点击查看大图）图6.16在右侧的图中，我们定义了3个span元素对象，并设置它们全部浮动。当为#span2对象添加clear:left;属性后，在其左侧已经存在#span1浮动对象，因此#span2对象为了清除左侧浮动对象，则自动排到底部靠左显示。 ? （点击查看大图）图6.17在这个示例中，我们会发现IE 6.0与非IE浏览器在解析浮动清除时存在细微的差异，如右图所示是在Firefox 2中的显示效果。其他浏览器显示相同的效果。可以看出非IE浏览器把跟随#span2对象的#span3浮动对象也解析在底部按顺序停留。这点细微区别应引起设计师的注意。 浮动清除只能适用浮动对象之间的清除，我们不能为非浮动对象定义清除属性，或者说为非浮动对象定义清除属性是无效的。但IE浏览器不支持这种标准。例如，在上面示例中，我们删除#span2选择符中的float:left;浮动定义，结果IE依然支持内联元素#span2对象的清除操作，而非IE浏览器则会忽略#span2对象中定义的clear:left;属性。 ? 图6.18在IE 6中浏览。#span2对象在浮动对象的底部显示。 ? 图6.19在Firefox 2中浏览。#span2对象依然环绕显示。 当一个浮动元素定义了clear属性，它不会对前面的任何对象产生影响，也不会对后面的对象形成影响，只会影响自己的布局位置。这里的影响是指不会主动改变别的对象的位置。例如，在上面的示例中我们修改其中的CSS布局代码： ?/*[浮动清除，参考示例6-12.html]*/span {/*定义span元素宽和高*/width:200px;height:100px;}#span1 {/*定义span对象1属性*/float:left;border:solid blue 10px;}#span2 {/*定义span对象2属性*/float:left;border:solid red 10px;clear: right; /*清除右侧浮动对象，如果右侧存在浮动对象，则自动在浮动对象底下显示*/}#span3 {/*定义span对象3属性*/float:left;border:solid green 10px;} 显示结果： ? 图6.20我们看到左图所示效果，说明当为#span2对象定义了clear: right;，由于上面的元素中没有向右浮动的对象，所以它依然与#span1对象并列显示。同时#span3对象作为后来的浮动对象不会受此清除操作影响，继续浮动在#span2对象后面显示。 浮动清除不仅针对相邻浮动元素对象，只要在布局页面里水平接触都会实现清除操作。例如，在上面示例基础上，我们清除#span2对象