清除浮动

1.额外标签法

​ 方法: 在浮动元素末尾添加一个空的块级标签 给其设置属性

​ 例如:

<div style="clear:both"></div>

​ 注意点:

• 也称为隔墙法，是 W3C 推荐的做法。
• 要求这个新的空标签必须是块级元素
• 优点： 通俗易懂，书写方便
• 缺点： 添加许多无意义的标签，结构化较差

2.父级添加 overflow

​ 方法：可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。 ​ 优点：代码简洁

​ 原理：开启 BFC 模式

​ 缺点：无法显示溢出的部分

3.伪元素法

/* 单伪元素法 */
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
/* 双伪元素法 */
.clearfix:after,
.clearfix:before {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/* 更推荐第二种 */
/* 使用方法：给需要清除浮动的父元素添加类名即可 */