【清除浮动的四种方法】

首先，我们为什么需要清除浮动呢？浮动有什么弊端或者说是不尽人意的地方呢？

带着问题我们进行探讨：

---

假如我们在一个父元素中给到子元素盒子浮动（float：left），这时我们可以观察到父元素没有高度了（也就是我们常说的高度塌陷），子元素自己跑到外面了，有时还会影响到下面的标准流。

开个玩笑说，也就是孩子长翅膀了，父亲管不住了，孩子们都想出去看看外面的世界。

那么怎么才能让孩子乖乖听话的呆在家里呢？这时就用到了我们的清除浮动，我们进入正题

语法：clear:属性值;(left / right / both){both:同时清除俩边浮动}

了解语法之后，我们开始探寻使用的方法：

---

方法一：隔墙标签法

顾名思义，可以理解为就是加了一个标签隔开了子元素于外界的联系。

我们需要在父元素的最后一个浮动子元素后添加“空标签”，并且给空标签一个类，在CSS中赋予其清除浮动语法（clear:both;）

“空标签”：这个添加的空标签必须为块级元素

这样就可以清除浮动了。

代码演示：

.clear-div{
    clear:both;
}
/*添加的元素必须为块级元素
也可以使用display:block;转化为块级元素*/


​

​

方法二：父级添加overflow属性

这个不多说，直接代码演示：

.father-box{
    overflow: hidden;
}

这个是不是非常的简单呀，只需要一行代码就解决了，但是这么简便的方法就一定会有他的弊端

虽然不会影响下面的标准流，父亲也有了高度，但是溢出的部分是不会显示的，这就是overflow: hidden的弊端

方法三：父级添加after伪元素 

我们直接在代码中讲解注释：

/*给父元素添加::after伪元素，就是在父元素的后面添加上一个空标签，相当于隔墙标签法PLUS*/
.father-box::after{
    content: '';
    display: bolck;
    height: 0;
    clear: both;
    visibility: hidder;
    /*visibility 属性规定元素是否可见,即使不可见的元素也会占据页面上的空间
    如果创建不占据页面空间的不可见元素，使用 "display" 属性*/
}
.father-box{
    *zoom: 1;
    /*为了防止低版本的IE浏览器不支持after选择器或者某些属性，在最后加上zoom:1来清除浮动
    它还是能够比较神奇地解决ie下比较奇葩的bug的，具体方法我们了解一二就可以了，直接拿出来用就好*/
}

方法四：父级添加双伪元素清除浮动

和上面放法类似，我们直接看代码：

.father-box::before,
.father-box::after{
    content: '';
    display:table;
    /*这里是将before.after放在同一条线上，实现对齐（表格原理）*/
}
.father-box:after{
    clear: both;
}
.father-box{
    *zoom: 1;
}