清除浮动有哪几种方法

清除浮动

目的

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

清除浮动的方法

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.
  • 总结: 这两种方法(双伪元素和单伪元素)是目前最常用的清除浮动的方法,推荐使用双伪元素清除浮动。
posted @ 2021-04-14 13:05  William_lT  阅读(1447)  评论(0)    收藏  举报