提到清除浮动我脑海中最先想到的一个问题就是：为什么要清除浮动，既然要清除浮动那么为什么要加浮动，浮动有他必须存在的理由是什么？
浮动是什么？在css中浮动对元素的定位有着不可替代的作用eg：
<div class="box" style="border: 4px solid yellow;width: 200px"> <div class="left" style="background: red;height: 100px;width: 100px"></div> <div class="middle" style="background: pink;height: 100px;width: 100px"></div> <div class="right" style="background: blue;height: 100px;width: 100px"></div>
</div>
这个所实现的效果如图；
如果要实现三个不同的颜色in-line,使用float是很方便的事情。
<style> .box>div{ float: left; } </style>
但是随之而来的问题就出现了，高度塌陷问题，虽然float给我们带来很大的方便，同时也使元素脱离了文档流，出现我们不想要的效果。所以清除浮动是必要的。
清除float，解决高度塌陷一般有三种方法:
a:利用overflow： hidden，
b:利用clear：both；
c:利用伪类元素对清除浮动对父元素的影响。
但是这是清除float的方法都个有优缺点。
a>给父元素加一个overflow：hidden；即可，这种清除浮动的方法有一个弊端，如果需要其中一个子元素超出父元素的效果时这种方法就不适合了； b> clear:both这种方法是在父元素里面加一个非float的块元素，在另加的块元素中加clear：both；这种方法和overflow：hidden；完全可以解决我们开发当中所遇到的高度塌陷的问题。但是这种方法也有缺陷，多加的块元素破坏了代码的语义。
c>给父元素加一个className——clearfix，然后通过伪类元素解决浮动。这种方法我也是刚刚接触，据说是最牛逼的方法。相当于给父元素添加一个虚拟的块元素，然后给块元素加clear：both；这样就解决了b中元素代码语义被破坏的问题。
.clearfix{ *zoom:1; } &::before,.&::after{ content: ''; display: block; } &::after{ clear:both; }
不对的地方多谢指正。
清除float后父元素的效果。
