W3Help-兼容性-知识库

http://www.w3help.org/zh-cn/kb/

clear:none/left/right/both/inherit
该特性表明元素框的哪一边不可以和先前的浮动框相邻。
'clear' 特性不考虑它自身包含的浮动子元素和不处于同一个块格式化上下文中的浮动元素。
可以简单的认为设置了 'clear' 特性值的元素，其 top border edge 要放在相关的浮动元素的 bottom margin edge 之下。注意这两种元素接触边界的区别。一个是 border，一个是 margin。
浮动元素上的 'clear' 特性

浮动框定位的宗旨是，在其左、上、右外边界不溢出包含块边界的情况下，尽量的靠上、靠左（"float:left"）或靠右（"float:right"）放置，但是不能高于它前面生成的块框、浮动框和行框的顶边，并且不能与其他浮动元素重叠。
示例代码：

<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red; margin-bottom:10px; ">
float
</div>
<div style="clear:left; width:350px; height:50px; background-color:green; border:5px solid yellow; margin-top:50px;">
clearance
</div>
示意图：

这与外边距折叠无关，因为浮动元素不与其他元素发生外边距折叠

当 'clear' 特性被赋予浮动元素时，它将导致浮动框定位规则的修正，另外一条限制（第10条）被追加。
对于 'clear' 特性值不是 'none' 的浮动框，其上外边界( top margin edge )必须低于前面所有左浮动框（'clear' 特性值为 "left" 时），或者右浮动框（"clear:right"），或者左右浮动框("clear:both")的下外边界。
这条补充规则，IE 中没有很好的贯彻（就是clear：both清楚浮动对IE无效）