清除浮动有哪几种方法

清除浮动

目的

• 为了解决父级元素因为子级浮动引起的内部高度为零的问题

清除浮动的方法

1、额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear：both；）（不推荐）

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

.clear {
  clear: both;
}

• 原因： 如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。
• 优点：通俗易懂，方便
• 缺点：添加无意义标签，语义化差

2、父级添加 overflow 属性（父元素添加 overflow:hidden）（不推荐）-->通过触发 BFC 方式，实现清除浮动

.clearfix {
  overflow: hidden;
}

• 优点：代码简洁
• 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3、使用 after 伪元素清除浮动（推荐使用）

.clearfix:after {
  content: "."; /* 内容为小点，尽量加不要为空，否则旧版本的浏览器有空隙*/
  display: block; /* 转换为块元素*/
  height: 0; /* 高度为零*/
  visibility: hidden; /* 隐藏盒子*/
  clear: both; /* 清除浮动*/
}
.clearfix {
  *zoom: 1; /*兼容ie6/7*/
}

• 优点：符合闭合浮动思想，结构语义化正确
• 缺点：ie6-7 不支持伪元素：after，使用 zoom:1 触发 hasLayout.

4、使用 before 和 after 双伪元素清除浮动(强烈推荐使用)

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1; /*兼容ie6/7*/
}

• 优点：代码更简洁
• 缺点：用 zoom:1 触发 hasLayout.
• 总结： 这两种方法（双伪元素和单伪元素）是目前最常用的清除浮动的方法，推荐使用双伪元素清除浮动。