css清除浮动的代码演示-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

创新互联公司专注于企业营销型网站建设、网站重做改版、郴州网站定制设计、自适应品牌网站建设、HTML5建站、商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为郴州等各大城市提供网站开发制作服务。

本篇文章和大家了解一下css清除浮动的代码演示。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

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

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伪元素' ,此时如下图所示。

css清除浮动的代码演示