11.11　控制元素浮动的位置

11.11　控制元素浮动的位置

可以控制元素能够浮动在哪些元素的旁边，以及不能浮动在哪些元素的旁边。要阻止元素浮动在不合适的元素旁边，可以使用clear属性。

控制元素浮动位置的步骤

输入clear:（如图11.11.1和图11.11.2所示）。
输入left，阻止元素浮动在该元素的左边（参见图11.11.3）；

输入right，阻止元素浮动在该元素的右边；

输入both，阻止元素浮动在该元素的左右两边；

输入none，允许元素浮动在该元素的左右两边。

#footer {
     clear: both;
     margin-top: 10px;
}

图11.11.1　在11.10节可以看到页脚环绕在浮动的main div周围。这里，为页脚设置clear: both；以阻止上述情况（参见图11.11.2）。也可以使用clear: left；因为唯一需要担心的浮动元素是向左浮动的。但是，对两边都进行清理并没有坏处，而且，随着设计越来越复杂，这样做也比较方便

11.11　控制元素浮动的位置 - 图1

图11.11.2　clear属性指示的是设置该属性的元素（在这个例子中是页脚）不能环绕在浮动元素的旁边，而要显示在浮动元素的后面

.logo {
     float: left;
     font-size: 2.5em; /* 40px/16px */
     margin: 0;
}
 
/* 这个div既包围主导航，又包围搜索表单 */
#masthead div {
     float: right;
}
 
/* :::: 站点导航 :::: */
.nav li {
     float: left;
     font-size: .75em; /* 12px/16px */
     padding: 0 25px 0 3px;
}

图11.11.3　在为报头设置样式时，标志（包括标语）是向左浮动的。包围主导航和搜索框的div是向右浮动的。在该div中，每个导航列表项目都是向左浮动的，从而让每个项目都可以显示在相邻项目的旁边，而不是竖直排列

提示　应该将clear属性添加到不希望环绕浮动对象的元素上（参见图11.11.4、图11.11.5和图11.11.6）。因此，如果要让一个元素在右侧没有浮动元素（以及任何靠向右侧的元素）之后才显示，就为它添加clear: right;（而不是为浮动的元素添加此样式规则）。

11.11　控制元素浮动的位置 - 图2

图11.11.4　大部分报头的布局都是好的，只是报头下面的内容（特别是侧栏）因为float而向上移动了一些。这是因为报头包含的元素（header）的高度变小了一些，因为计算元素高度时不把其中的浮动元素包含在内

<div id="container">
     <div id="page">
        <header id="masthead" role="banner" class="clearfix">
           ...
        </header>
 
        <div id="main" role="main">
           ...
        </div>

图11.11.5　为清除报头的float，从而让主体内容和侧栏div不紧靠着它，可以在主体内容和侧栏外面再添加一层div，并为其设置clear: both；不过，要让HTML尽可能简洁，这样做并不理想。另一种流行的解决方案是使用clearfix。使用这种方法，需要做的只是为报头应用class="clearfix"。假定在样式表中已经为.clearfix设好了样式，问题就解决了（参见图11.11.6）。更多细节信息参见“清除float的其他方法”

11.11　控制元素浮动的位置 - 图3

图11.11.6　clearfix方法很神奇地消除了报头的float，从而让跟在它后面的内容显示在它的下方

提示　页面中的标语由一个span包围。样式表中有一条规则是.logo span { display: block; }（但没有将其显示出来）。这条规则让span显示在单独的行，就像段落等默认显示为块级的元素。更多信息参见11.19节。

清除float的其他方法

要清除报头的float，从而让主体内容和侧栏内容不靠向它（参见图11.11.4），还有其他一些方法。

overflow方法

第一种也是最简单的方法就是将下面的代码添加到样式表中：
#masthead {
 
 overflow: hidden;
 
}
（overflow属性将在本章后面讲到。）有时使用overflow: auto;也有效，但这样做可能会出现一个滚动条，这显然是不希望看到的。在某些情况下，overflow: hidden;会将内容截断，对此要多加注意。对于我自己的网站，我仅在overflow能解决float问题的情况下才使用overflow方法（就像这个报头的问题就是这种方法能解决的）。如果这种方法不能解决，就使用clearfix（参见图11.11.5）。通常，使用clearfix方法更容易保持一致，这也是我为什么在示例中展示这种方法的原因（尽管它是我最后考虑的方法）。

clearfix方法

多年以来，由于Web社区的贡献，.clearfix的CSS已经经历了好几个不同的版本。下面的版本来自出色的HTML5 Boilerplate（www.html5boilerplate.com）。该项目由Paul Irish发起，随后大量社区开发人员为其贡献了代码。推荐你下载使用。

该项目核心成员Nicolas Gallagher贡献了下面的clearfix代码。将它们复制到你的样式表中，再为包含float的元素添加class="clearfix"即可（参见图11.11.5）。
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
这段代码有一点复杂，因此这里不再多作解释。相关的解释与讨论参见http://nicolasgall-agher.com/micro-clearfix-hack/（注意，这些讨论都很技术）。

小结

使用clear属性和使用overflow或clearfix方法有一些细微的差别。使用clear时，该属性应用于不想环绕浮动元素的元素。对于另两种方法，有关样式则应用于浮动元素的容器或元素本身。

11.11 控制元素浮动的位置