CSS清楚浮动三种方法

前言：为何清除浮动？对于浮动的元素，其父类盒子的高度往往不能输入一个固定的值（因为很多网页内容有多有少），但如此就无法识别到浮动的元素，此时高度自动变成0，除去浮动的元素外的其他元素会挤压此父元素（出现本来是footer的元素被浮动元素压住的情况），故需清除浮动。

CSS中清楚浮动的三种方法：

一、额外标签发（隔墙法）

找到最后一个浮动的元素，在他之后再添加一个盒子

例如：

注意⚠️：最后样式为clear的元素一定为块级元素方可生效

优点：通俗易懂

缺点：添加了很多无意义的标签，结构性上表现较差

二、清除浮动之父元素OverFlow

给浮动元素的父盒子添加 overflow:hidden | auto | scroll;

三、清除浮动之after子元素

1 .clearfix:after {

2 content: "";

3 display: block;

4 height: 0;

5 clear: both;

6 visibility: hidden;

7 }

8 .clearfix { /* IE6、7 专有 */

9 *zoom: 1;

10 } //需将上述该行代码粘贴入html文件//需要调用时，给父亲盒子的class添加clearfix属性（调用）

四、清除浮动之双伪元素

1 .clearfix:before,.clearfix:after {

2 content:"";

3 display:table;

4 }

5 .clearfix:after {

6 clear:both;

7 }

8 .clearfix {

9 *zoom:1;

10 }

11 //将上述代码直接粘贴入html

调用时 同（三）