[译文]清除浮动的技巧

来源：互联网发布：如何摆脱网络成瘾编辑：程序博客网时间：2024/04/27 19:57

原文：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>

阅读全文

1 0