css清除浮动的几种办法

为什么要清除浮动？

当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。

清除浮动的方法

基本实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        #father{
            border: 1px solid black;
        }
        #son{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>   
</body>
</html>

此时未清除浮动，父盒子高度为0

1.png

此时清除浮动，父盒子高度为子盒子高度

2.png

一：为父元素设置高度

简单粗暴，但后期维护麻烦

二：父元素添加over：hidden

通过触发BFC方式，来清除浮动

#father{
    overflow: hidden;
}

三：使用after伪元素清除浮动

#father:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
#father{
    /*浏览器兼容*/ 
    *zoom: 1;
}

四：使用before和after伪元素清除浮动

#father:after,
#father:before{
    content: "";
    display: table;
}
#father:after{
    clear: both;
}