[译文]清除浮动的技巧

最新推荐文章于 2024-07-05 14:51:32 发布

阿超就是我

最新推荐文章于 2024-07-05 14:51:32 发布

阅读量396

点赞数 1

分类专栏： css&css3 文章标签：浮动 css

css&css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

原文：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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[译文]清除浮动的技巧

原文：Techniques for Clearing Floats如果你很清楚（浮动元素）的后继者元素是什么，那么你只需将clear：both应用于那个元素即可。这是一个理想的情况，因为这种方法无需花式的技巧以及额外的元素。当然，现实不会如此理想化（也就是说，你可能不知道后继者元素是什么），我们需要有更多的清除浮动的方法。The Empty Div Method:这个方法的意思就是字面意思：我们
复制链接

扫一扫