清除浮动

发表于 更新于 分类于

css 为什么要清除浮动

  1. 很多情况下，如果我们使用了 float 特效，出现 margin，padding 设置不能正确显示，浮动会导致父级子级之间设置了 padding，导致了属性不能正常传达，导致 margin 不能正常显示，所以我们要清除浮动。

  2. 导致背景不能显示，如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。

  3. 边框不能撑开，由于子级使用了浮动效果，并且已经产生了浮动，父级不能撑开，所以影响边框不会随着内容的变化而变化。

清除浮动

  1. css 伪元素清除浮动
1
2
3
4
5
.clear::after {
  content: "";
  display: block;
  clear: both;
}
  1. 在父元素上添加 overflow: hidden
1
2
3
4
.parent-clear {
  overflow: hidden;
  zoom: 1;
}