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