清除浮动

一个误区

<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="bottom">底部</div>

.left {
  float: left;
  width: 1000px;
  height: 600px;
  background: bisque;
}
.right {
  float: right;
  width: 600px;
  height: 200px;
  background: deeppink;
}
.bottom {
  float: left;
  width: 500px;
  height: 50px;
  background: mediumaquamarine;
}

此时由于没有清除浮动，bottom 是这样的：

清除浮动可以为bottom增加 clear:both 属性来实现

.bottom {
  clear: both;
  float: left;
  width: 500px;
  height: 50px;
  background: mediumaquamarine;
}

注意，我一直有个误区，不可以通过 right:after 或者 bottom：before 来实现，因为 :after 和 :before 是在元素内部增加一个伪元素，相当于增加了一个子元素，而不是兄弟元素

比如，给 right 增加一个伪元素，实际上是增加的子元素，在 right 内部

正确用法

所以对于父元素坍塌的情况可以使用伪元素来清除浮动

<div class="outer">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>
<div class="bottom">底部</div>

.outer {
  background: gray;
}
.left {
  float: left;
  width: 1000px;
  height: 600px;
  background: bisque;
}
.right {
  float: right;
  width: 600px;
  height: 200px;
  background: deeppink;
}
.bottom {
  width: 1500px;
  height: 50px;
  background: mediumaquamarine;
}

可以看到，由于没有清除浮动,虽然 bottom 在 outer 外部，却没位于底端，因为 outer 内部子元素为 float，导致 outer 并没有被撑开。

解决这个问题有三种方法
1. 给 bottom 添加 clear:both
2. 给 outer 添加 overflow:hidden
3. 利用伪元素添加 clear:both

原理都是为了形成 BFC， 注意，clear 属性只适用于块级元素

所以给 outer 添加一个 clear-fix 类

.clear-fix:after {
  display: block;
  content: '';
  clear: both;
}

问题解决

参考

• https://www.jianshu.com/p/9d6a6fc3e398
• https://segmentfault.com/q/1010000004478106