clearfix清除浮动

为什么要使用 clearfix（清除浮动）。

通常我们在写html+css的时候，如果一个父级元素内部的子元素是浮动的（float），那么常会发生父元素不能被子元素正常撑开的情况。

<div class="container clearfix">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">footer</div>

.container {
  width: 500px;
  background-color: black;
}

.left {
  width: 200px;
  height: 300px;
  background-color: red;
  float: left;
}

.right {
  width: 200px;
  height: 200px;
  background-color: green;
  float: right;
}

.footer {
  width: 400px;
  height: 50px;
  background-color: blue;
  position: relative;
  z-index: 2;