浏览器支持情况：基本上所有的主流浏览器都支持clear属性。
其实浮动我是这么理解的，让某个元素，脱离原来的标准流，浮动在标准流之上，它拥有自己的浮动流，和标准流不是一个层次上的。
首先呢，我们建立四个有颜色的色块，为了方便理解他们浮动的具体位置。
一，画四个色块，没有浮动。
这是最开始的样子，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。
<style>
div{
height: 40px;
}
#div1{
width: 100px;
}
#div2{
width: 200px;
}
#div3{
width: 300px;
}
#div4{
width: 400px;
}
</style>
二，使其中一个色块浮动，观察其变化
把第二个块浮动属性设置为 left 可以看的出第三个块被第二个块给遮住了。
<style>
div{
height: 40px;
}
#div1{
width: 100px;
}
#div2{
float: left;
width: 200px;
}
#div3{
width: 300px;
}
#div4{
width: 400px;
}
</style>
把第二个块浮动属性设置为 right 可以看的出第二块往右便去了。
<style>
div{
height: 40px;
}
#div1{
width: 100px;
}
#div2{
float:right;
width: 200px;
}
#div3{
width: 300px;
}
#div4{
width: 400px;
}
</style>
三，为了更加清楚的看清出浮动属性的影响，我们将两个色块加入向右的浮动，并改变浏览器窗口大小，方便看出浮动流与本身文档流的具体排布。
当窗口为1337px
当窗口为899px 可以看的出第三个还是紧跟着第二个排列在最右边
继续把窗口拉小，当前窗口为627px,就看见第四个色块被遮住了。
再拉小窗口，窗口宽度为515px,当第二个色块与第三个色块的宽度（这里还有body的左右外边距和16px）大于窗口宽度时，
第三个色块，被挤了下来，放在了第二个色块之下
<style>
div{
height: 40px;
}
#div1{
width: 100px;
}
#div2{
float: right;
width: 200px;
}
#div3{
float: right;
width: 300px;
}
#div4{
width: 400px;
}
</style>
如果改变第二个和第四个色块的浮动属性，变为向左浮动，怎会变成下面的样子。
<style>
div{
height: 40px;
}
#div1{
width: 100px;
}
#div2{
float: right;
width: 200px;
}
#div3{
width: 300px;
}
#div4{
float: right;
width: 400px;
}
</style>
~~~是不是，可以通过以上实验，可以看的出哪里是标准流，哪里是浮动的。
额，
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前，远离页面边缘的一端是后。
这段是别人总结的拿过总结一下，哈。
四，接下来是清除浮动（打破横向排列）
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
~~clear清除浮动，只能影响清除元素本身，不能影响其他元素。
原文：http://www.cnblogs.com/fnncat/p/4851308.html