css清除浮动的代码演示

发布时间：2020-07-21 17:53:47 作者：小新
来源：亿速云阅读：202

本篇文章和大家了解一下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清除浮动的代码演示