清除浮动

  提到清除浮动我脑海中最先想到的一个问题就是：为什么要清除浮动，既然要清除浮动那么为什么要加浮动，浮动有他必须存在的理由是什么？

      浮动是什么？在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后父元素的效果。