CSS高度塌陷问题及清除浮动的三种方式

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

高度塌陷问题

• 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度

  • 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

• 解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）

• 清浮动的目的是

  • 让父元素计算总高度的时候，把浮动子元素的高度算进去

清除浮动的三种方式

方式一：

给父元素设置固定高度

扩展性不好（不推荐）

方式二：

在父元素最后增加一个空的块级子元素，并且让它设置clear: both

• 会增加很多无意义的空标签，维护麻烦
• 违反了结构与样式分离的原则（不推荐），因为你这是样式问题，却添加了一个标签，相当于借助结构来实现。

方式三：

给父元素增加::after伪元素

• 纯CSS样式解决，结构与样式分离（推荐）

.clear-fix::after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
}
.clear-fix {
  /* IE6/7 兼容性，现在一般不需要这个了，都淘汰了*/
  *zoom: 1;
}