css3盒模型（box）中的一个概念，在css这种，每个元素生成了包含内容的框，有内联元素和块级元素之分。也可以区分为替换元素与非替换元素。
替换元素：浏览器根据标签的元素与属性来判断显示具体的内容。如 input标签，根据type显示内容。img标签，根据src显示内容。textarea、select、object都是替换元素。
非替换元素：内容直接告诉浏览器，浏览器将其显示出来。内容为标签包裹的内容。
块级元素与内联元素，在设置float之后，元素会变成块级元素。
float是令本身元素脱离网页布局流，但是之前布局好的不会改变，而脱离流之后float元素的位置也是从当前位置开始的。如果是同一个位置的多个float元素，不管是left还是right，都会在同一行开始排列，直到下一个位置不够放入下一个元素时，才会换到下一行。
clear则是用来规定左边还是右边不允许出现float元素的，任何元素都可以设置clear，用来规定自己的左边或者右边或者两边都没有浮动元素。
注意，clear属性的意思是，禁止自己左边或者右边出现浮动元素，但是这并不会影响其他元素的布局。比如说，一个元素禁止自己右边有浮动元素，而他后面紧跟一个float:left的元素，这样该元素照样会float到自己右边，因为他的clear属性，并不会影响其他的布局，只会影响自己的布局。比如说上面那种情况，可以设置后面元素的clear为left，这样后面的元素左边禁止出现float元素，因为左边是一个float，所以他没办法，只能显示到下一行了。（clear:right是用在float:right的几个元素中的第二个的。）
由此可知，多个float元素中，设置clear会生效的只有第一个元素之后的元素。
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
说了这么多，float的常用法还是用来一行排布多个div，这样就有问题了，怎么令float元素后的非float元素排在float元素之后呢，这就需要使用清除了，在最后一个float元素后放任意一个标签，设置该标签的clear为both。由于clear禁止自己左右有float元素，于是没办法，自己只有排列到下一行了。这就是我们经常看到的网页代码中的::after伪类的作用了。
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
float浮动的元素，脱离标准流，但是又和标准流中的其他元素一样，可以设置各种属性，其实就是开辟了在标准布局之上的一个布局，用于放这些float元素。
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
详细内容参考：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html