我们已经讨论了一些浮动行为，介绍定位前还有一个内容没有谈到。网页设计人员可能并不总是希望内容流过浮动元素，某些情况下，可能要特意避免这种行为。如果你的文档分组为小节，可能不希望一个小节的浮动元素浮动到另一个小节中。在这种情况下。你希望将每小节的第一个元素设置为禁止浮动元素出现在它旁边。如果第一个元素可能放在一个浮动元素旁边，则会向下推，直到出现在浮动元素的下面，而且所有后续内容都在其后面出现，如图10-21所示。

这可以利用clear属性完成。

clear值：left | right | both | none | inherit

初始值：none

应用于：块级元素

继承性：无

计算值：根据指定确定

例如，网页设计人员为了确保所有h3元素不会放在左浮动元素的右边，可以声明h3{clear: left;}。这可以解释为“确保一个h3的左边没有浮动图像”，其效果非常类似干HTML中的<br clear="left">（有讽刺意味的是，大多数浏览器的默认行为都是为br元素生成行内框，所以clear不能应用于br，除非改变其display值！）。以下规则使用clear 来防止h3元素左边有浮动元素：

h3 {clear: left;}

这会把h3推过所有左浮动元素，不过还允许浮动元素出现在h3元素的右边，如图10-22所示。

为了避免这种情况，确保h3元素不会与任何浮动元素在同一行上，要使用值both:

h3 {clear: both;}

这很好理解，这个值会防止指定了clear的元素两边存在浮动元素，如图10-23所示。

另一方面，如果只是不希望h3元素的右边有浮动元素，要使用h3{clear: right;}。

最后还有一个clear: none，它允许元素浮动到另一个元素的任意两边。float: none 值之所以存在，主要是为了支持正常的文档行为，即元素允许其两边有浮动元素。当然，可以用none来覆盖其他样式，如图10-24所示。尽管有规则指出h3元素不允许两边有浮动元素，不过，有一个H3特别设置为允许两边有浮动元素：

h3 (clear: both;)

<h3 style="clear: none;">What's With All The Latin?</h3>

在网站建设CSS1和CSS2中，clear工作如下，它会增加元素的上外边距，使之最后落在浮动元素的下面，这实际上会忽略为清除元素（设置了clear的元素）顶端设置的外边距宽度。也就是说，清除元素的上外边距可能会调整，例如，并不是1.5em，而可能增加到10em或25px，甚至7.133in，或者是将元素下移足够远（使内容区在浮动元素下边界的下面）所需的任何长度。

在网站建设CSS2.1中，引入了一个清除区域。清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内。这意味着元素设置clear属性时，它的外边距并不改变。之所以会向下移是这个清除区域造成的。要特别注意图10-25中标题边框的放置，这是由以下标记得到的结果：

img.sider {float: left; margin: 0;}

h.3 {border: 1px solid gray; clear: left; margin-top: 15px;}

<img src="boxer.gif" class="sider" >

<img src="stripe.gif" >

<h3>Why Doubt Salmon?</h3>

h3上边框与浮动图像下边框之间没有间隔，因为在h3的上外边距（15像素）之上增加了25像素的清除区域，将h3的上边框边界推到刚好越过浮动元素的下边界。一般都会这样，除非h3的上外边距计算为40像素或更多，在这种情况下，h3会很自然地放在浮动元素下面，clear值是什么则无关紧要。

当然，大多数情况下，网页设计人员无法知道一个元素周围多大范围内不允许有浮动元素。要确保一个清除元素（设置clear属性的元素）的顶端与一个浮动元素的底端之间有一定空间，可以为浮动元素本身设置一个下外边距。所以，如果希望上例中的浮动元素下面至少有15 像素的空间，可以修改如下：

img.Sider {float: left; margin: 0.0 I5px;}

h3 {border: 1px solid gray; clear: left;}

网页设计浮动元素的下外边距会增加浮动框的大小，且由于清除元素必须推到浮动框下面的某个点以下，浮动框大小的增加会使这个点下移。前面已经看到过，这是因为浮动元素的外边距边界定义了浮动框的边界。