css革除浮动的道理介绍-百分百源码网

css革除浮动的道理介绍

发布时间：09/01 来源：未知浏览：关键词：

第一我们要知道clear:both是清除浮动的关键。

（引荐教程：css快速入门）

clear是CSS中的定位属性，规定元素的哪一侧不同意其他浮动元素。那么clear:both就是规定在摆布两侧均不同意浮动元素。

clear属性只能在块级元素上其作用，这就是清除浮动样式中display:block的作用。

别的visibility: hidden;height: 0;只要content的值为空，写不写都无所谓。

那么为什么要清除浮动，最常见的是由于外层容器高度坍塌，代码演示：

<style>
.wrap {
    width: 200px;
    border: 1px solid #333;
}
.wrap:after {
    content: '';
    display: block;
    clear: both;
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class='wrap'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

为了显示分明一点，在.wrap:after 样式中的content设定为content: 'after伪元素' ,此时如下图所示。