css中float清除浮动的三种方法

在我们日常使用浮动的时候，经常会遇到父元素坍塌的清空（即父元素盒子无法包裹住子元素）。如下图，父元素坍塌成一条线，位于浮动元素的上方。

 此时我们需要用到清除浮动来解决这种问题。

方法一（简便方法）：我们只需要给坍塌的父元素设置一个overflow:hidden属性

html和css代码如下

 <div class="parent">
        <div class="child"></div>
    </div>

.parent{
            border: 1px solid black;
            background-color: #bfa;
            /* overflow: hidden; */
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

我们只需要给坍塌的父元素设置一个overflow属性

overflow: hidden;

这样就解决了坍塌的问题

 方法二：在浮动元素下方添加一个空标签（div），给之设置clear：both即可

html和css如下

<div class="parent">
        <div class="child"></div>
        <div class="clear"></div>
    </div>

.parent{
            border: 1px solid black;
            background-color: #bfa;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .clear{
            clear: both;
        }

我们也实现了清除浮动

 方法三：给父元素设置伪元素方法

html和css如下

<div class="parent">
        <div class="child"></div>
    </div>

.parent{
            border: 1px solid black;
            background-color: #bfa;
        }
        .parent:after{
            content: '';
            display: block;
            clear: both;
            visibility: hidden;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }

如上图，我们给父元素 添加：after，在:after伪元素中设置上面的属性即可实现清除浮动

这就是三种清除浮动的方法！

如果有帮助，留下你的赞哦！