原文:Techniques for Clearing Floats
如果你很清楚(浮动元素)的后继者元素是什么,那么你只需将clear:both
应用于那个元素即可。这是一个理想的情况,因为这种方法无需花式的技巧以及额外的元素。当然,现实不会如此理想化(也就是说,你可能不知道后继者元素是什么),我们需要有更多的清除浮动的方法。
- The Empty Div Method:
这个方法的意思就是字面意思:我们需要一个空的div。
<div style="clear: both;"></div>
有时你可能会看到一个<br>
元素(用于清除浮动),或者一些其他的随机元素。但是div
是最普遍的元素,因为它没有浏览器固定样式,没有任何特殊功能,而且不可能被通用CSS样式作用。(原文作者的意思大约是:相对于article,section这些标签,不大可能出现div{a:b}这样通用的CSS样式。)这个方法被语义纯粹主义者嘲笑,因为这个空元素的存在对页面没有任何内容上的意义,只是纯粹用于表达。当然,严格意义上将,他们是正确的。但是这种方法解决了问题,而且没有妨害到其他人。
(译者的代码示例):
<!DOCTYPE html>
<html>
<head>
<style>
#main {
float: left;
width: 50%;
height: 400px;
background: plum;
}
#sidebar {
height: 200px;
float: left;
width: 20%;
background: red;
}
#footer {
height: 200px;
width: 20%;
background: greenyellow;
}
</style>
</head>
<body>
<div id="main">
this is main
</div>
<div id="sidebar">
this is sidebar
</div>
<div style="clear: both;"></div>
<div id="footer">
this is footer
</div>
<script></script>
</body>
</html>
- The Overflow Method
这个方法依赖于在父元素上设置overflow
属性。如果这个属性设置成auto
或者hidden
,那么父元素会扩展以包含浮动的元素(正常下,父元素是坍塌的),有效地为后继元素清除了浮动。这种方法从语义学上将是优雅的,因为它没有要求额外的元素。然而,如果你发现:你需要增加一个父元素以实现这个方法,那么这个方法就和上一个方法是一样非语义化的,而且适应性更差。我们需要记住,overflow
property不是专门用于清除浮动。小心不要因此隐藏内容或者触发不需要的滚动条。
(译者的示例代码)
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
overflow: hidden;
/* or overflow-auto */
border: 1px solid black;
}
#main {
float: left;
width: 50%;
height: 400px;
background: plum;
}
#sidebar {
height: 200px;
float: right;
width: 50%;
background: red;
}
#footer {
width: 20%;
background: greenyellow;
height: 200px;
/* height is not allowed here */
}
</style>
</head>
<body>
<div id="parent">
<div id="main">
this is main
</div>
<div id="sidebar">
this is sidebar
</div>
</div>
<div id="footer">
this is footer
</div>
<script></script>
</body>
</html>
- The Easy Clearing Method
这个方法使用一个灵活的CSS伪元素属性(:after)以清除浮动。你需要做的不是在父元素上设置属性,而是在父元素上增加一个额外的类clearfix
。这个类是这样的:
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
这样会产生一个很小的content
,这个content会被隐藏在父元素(里面)的后面。父元素因此得以清除浮动。
(译者的示例代码)
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
border: 1px solid black;
}
#main {
float: left;
width: 50%;
height: 400px;
background: plum;
}
#sidebar {
height: 200px;
float: left;
width: 20%;
background: red;
}
#footer {
width: 20%;
background: greenyellow;
height: 200px;
}
#parent:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</style>
</head>
<body>
<div id="parent">
<div id="main">
this is main
</div>
<div id="sidebar">
this is sidebar
</div>
</div>
<div id="footer">
this is footer
</div>
<script></script>
</body>
</html>