CSS - clearfix清除浮动

首先，我们来解释一下为什么要使用 clearfix（清除浮动）。
通常我们在写html+css的时候，如果一个父级元素内部的子元素是浮动的（float），那么常会发生父元素不能被子元素正常撑开的情况，如下图所示：

 

父级元素未被展开

在写怎么使用clearfix解决这个问题之前，先来看一个简单的clear的例子便于理解。
假设我们现有这样一个布局：

 

footer not cleared

我们可以看到footer的布局方式并不是我们想让它做的，为了让footer置于底部，可以给footer加上 clear:both; 来清楚footer两侧的浮动。

.footer {
  clear: both;
}

 

footer cleared

---

理解了上面的例子之后，我来用一个例子解释clearfix的作用：

<div class="container"> <!-- black -->
  <div class="left">left</div> <!-- red -->
  <div class="right">right</div> <!-- green -->
</div>
<div class="footer">footer</div> <!-- blue -->

.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;
}

 

上面代码执行结果（未清除浮动）

我们可以看到，虽然footer在container外部，却没位于底端，因为container内部子元素为float，导致container并没有被撑开（图中根本没有黑色元素显示出来）。
如果我们给footer添加 clear:both;，布局问题可以被解决，但是container依旧没有被撑开，有一种强行解决问题的感觉。
要解决此问题，我们可以给container添加一个类，叫做clearfix，下面是clearfix的实现形式（之一）：

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

上述代码通过伪类 :after 在container后添加内容（content），来实现清除浮动。

 

添加clearfix后的布局

最后，附上我在JSFiddle上写的演示代码，大家可以去动手尝试一下 - clearfix 演示

相信这会解决不少你之前遇到过的布局问题！

注：部分图片截取自css-tricks

作者：Wenliang
链接：https://www.jianshu.com/p/9d6a6fc3e398
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。