有关于css的clear属性
定义和用法
clear 属性规定元素的哪一侧不允许其他浮动元素。
说明
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.clear="left" |
实例
图像的左侧和右侧均不允许出现浮动元素：
img
{
float:left;
clear:both;
}
浏览器支持
所有主流浏览器都支持 clear 属性。
注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
可能的值
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
现在有几种情况，我分类来讨论：
1.对于非块级元素来说，它是可以在一行排列显示的，如果都设置了浮动可以使它们靠得更紧密一些;
现在以三个非块级元素为例，来实践一下。
三张图片：img1,img2,img3
在下面的html中测试clear产生的作用
<html>
<head>
<style type="text/css">
#img1
{
float:left;
}
#img2
{
float:left;
}
#img3
{
float:right;
}
</style>
</head>
<body>
<img id="img1" src="/i/ct_beatles.jpg" />
<img id="img2" src="/i/ct_beatles.jpg" />
<img id="img3" src="/i/ct_beatles.jpg" />
初始三张图片都设置float:left,img2设置clear:left时，把自己弹到下一行去了;设置clear:right时，右边的浮动元素没反应?
现在把三张图片的float设置为right,img2设置clear:right时，自己弹到下一行去了;img2设置clear:left时，img1,3没反应？
现在看来，clear属性里的left和right是和float里的对应的，也就是说浮动元素的clear:left只对清除左浮动的元素起作用，right的同理。
注意：清除的是与引元素紧紧相邻的元素，有空过元素位后面的元素就不清除了。
看下面的：
#img1
{
float:left;
}
#img2
{
float:left;
clear:right;
}
#img3
{
float:right;
}
img2右边的img3浮动设置为right，可也没有清除掉，仍然在一行显示
如果中间一张图片没有设置浮动，就作为普通流，右边的浮动元素会自动换到下一行，所以clear:right都省了，
而左边如果有浮动元素，设置clear:left，自己还是会弹到下一行的。