什么是浮动？为什么要清除浮动？如何清除浮动？

问题引入

首先思考这样几个问题，要是都回答上了说明你对浮动的理解还不错，本文有什么需要补充的欢迎指正，要是回答不上或者回答不全请看我慢慢道来，希望看完本文对浮动有一个更清楚的认识！！
问题1：什么是浮动？
问题2：怎样就是浮动了？
问题3：既然都浮动了为什么还要清除浮动？
问题4：如何清除浮动？

本人以前也是不太清楚这里面的每一个概念，今天花了点时间将它根深蒂固了，一起来结合例子学习一下吧~

解决问题1（什么是浮动？）

浮动最开始出现的意义是为了让文字环绕图片，后来发展着发现浮动可以让多个块级元素并排显示，这样子很方便只需要一个属性。到这里肯定有人会问了，那我把display属性设置为inline-block不也能达到效果，为啥还用浮动。那有没有考虑过我就要这些元素从右往左排列呢哈哈哈，所以浮动可以控制居左还是居右排列。

解决问题2（怎样就是浮动了？）

其实想实现浮动很容易，给想让他浮动的元素设置属性float：left/right就可以了，浮动造成的结果就是让设置浮动的元素脱离文档流，达到按方向排成一排的效果，也同时会带来一个问题-------父元素高度塌陷。现在我们按照上述的方法建立一行浮动的元素，代码如下：

<div class="box">
  <div class="div"></div>
  <div class="div"></div>
</div>

样式：

.box{
    border: 1px solid;
    width: 100%;
  }
.div{
    float: left;
    border: 1px solid;
    width: 100px;
    height: 100px;
   }

得到的效果如下：

明显父元素高度没有被撑开，上下边距重合到一起去了。接下来我们来解决下一个问题：

解决问题3（既然都浮动了为什么还要清除浮动？）

这里的清除浮动不是清除已经浮动的元素，而是解决由于浮动所带来的的问题（父元素高度塌陷）来清除浮动。

解决问题4（清除浮动的几种方法）

1. 插入多余元素并设置其属性clear：both
   原理：父元素和冗余元素的高度都为0，并且浮动元素会盖在其上方，当设置clear：both时，冗余元素会躲开浮动元素直到不被其盖住，而父元素为了包裹住他自然就撑开了。

<div class="box">
  <div class="div"></div>
  <div class="div"></div>
  <div class="div3"></div>
</div>

  .box{
        border: 1px solid;
        width: 100%;
       }
  .div{
        float: left;
        border: 1px solid;
        width: 100px;
        height: 100px;
        }
 .div3{
        clear: both;
      }

缺点：在页面中添加冗余元素太麻烦，且不符合语义化

2. 采用伪元素：after，给父元素新增一个clearfix类，为其增加伪元素，代码如下：

<div class="box clearfix">
  <div class="div"></div>
  <div class="div"></div>
</div>

  .box{
        border: 1px solid;
        width: 100%;
       }
  .div{
        float: left;
        border: 1px solid;
        width: 100px;
        height: 100px;
        }
	.clearfix::after{
            content: " ";
            display: table; /*采用此方法可以有效避免浏览器兼容问题*/
            clear: both;
        }

结果和上述一样。
缺点：伪元素存在兼容性问题。

3. 创建BFC
   原理：因为BFC有隔离作用，BFC内的元素无论怎么排布都不会影响BFC，这样也可以达到清除浮动的效果。详情可以见我之前的一篇博客，了解BFC=>关于BfC

小结

今天关于浮动的知识就到这里，按个人理解写的，欢迎指正！！