可视化格式模型-clear特性
‘clear’特性
该特性表明一个元素框的哪一边不可以和先前的浮动框相邻。’clear’特性不考虑它自身包含的浮动子元素和不处于同一个Block formatting context中的浮动元素。 对于插入框，该属性适用于插入框所属的最后的块框。 间隙(Clearance)以元素margin top上方空白的方式被引入。它用来把元素垂直（典型情况是向下）推过浮动框。它是一个值。
clear 特性值的作用
left/right/both：生成框的间隙，是指设置足够的(空白区)，以使元素的顶边框边界(top border edge)放置到由源文档中较早元素生成的任何左浮动框/右浮动框/左右浮动框的底外边(bottom outer edge，即底margin边)之下。 none：对考虑到浮动后的框的位置没有约束。
简单点儿说，就是设置了clear的元素的 top border edge 要放在相关的浮动元素的 bottom margin edge 之下。注意这两种元素接触边界的区别。一个是borer，一个是margin。 一个直观的例子：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red;">
float
</div>
<div style="clear:left; width:300px; height:50px; background-color:green; border:5px solid yellow; margin-top:50px;">
clearance
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
设置了clear的元素的margin-top是50px，没起作用，为什么呢？注意，应该是设置了clear的元素的top border edge，不是margin edge。 如果想让它们之间有50px的间距，怎么办？ 看修改过的代码：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div style="width:300px; height:100px; background-color:green; float:left; border:5px solid red; margin-bottom:50px;">
float
</div>
<div style="clear:left; width:300px; height:50px; background-color:green; border:5px solid yellow;">
clearance
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
浮动元素上的 clear
为 clear 特性被赋予浮动元素时，它将导致浮动框定位规则的修正，另外一条限制被追加： 浮动框区的上外边界（top margin edge）必须低于前面所有左浮框的下外边界（在clear:left时），或者右浮框区（clear:right），或者两个框区(clear:both)。
例子：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="Container" style="width:300px; height:100px; border:1px solid gold; ">
<div id="DIV1" style="float:right; width:150px; height: 50px; background-color:green; ">float:right;</div>
<div id="DIV2" style="float:left; width:100px; height: 50px; background-color:red; clear:right;">clear:right float:left;</div>
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。