主要就是这一句话：float: left/right;
float：left（向左浮动）
float：right（向右浮动）
接下来看一段代码：
然后接下来更改css样式
发现box2层叠上去了，这点是不是和position：absolute很像呢，但是不能那么理解
这是由于浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素是看不到他们的，只有产生bfc的元素，文本类元素（display中有inline属性）和文本能看到浮动元素
其他的我就不一一写了
接下来看一个问题：
这个的原因就是因为父级元素是块级元素，所以是看不到内部的浮动元素的
那我现在想让外部div正好包裹内部div
方法1：直接设置外部div的高为100px
当然这种方法肯定不行，这只有三个元素，如果后台传过来20个，那不是gg
方法2：清除浮动流，
html中的三个子div每个都会向后面产生一个浮动流，影响后面元素的样式
那么在最后一个浮动元素的后面加一个p标签，并清除其左右的浮动流，就可以了，具体方法是：
clear可填值为：left，right，both（一般都是both）
这就是解决父级元素包裹内部浮动元素的方法
还有一种方法就是使用伪元素选择
伪元素：伪元素存在于任何一个元素（tag、element）里面，我们可以通过CSS将伪元素选出来（伪元素本身存在）
例如：
接下来看一下具体作用：
伪元素可以通过css样式来操作，必须要有content属性才可以生效，但是没有html结构（after同理，逻辑最后）可以当做正常元素使用，默认为（inline）属性
所以通过伪元素解决浮动流是最好的，不需要加p标签去破坏页面结构，
发现不起作用，这是因为clear只对块级元素有作用，p标签是块级元素，而伪元素默认是行级元素，所以在加上block属性
现在就可以了
产生这个问题的原因就是父级元素看不到浮动流，那么让父级元素看的到浮动流不就可以了
所以解决这个问题的方法还有就是将父级元素变为bfc元素
方法有：
overflow：hidden
display：inline-block
position：absolute
float：left
但是你会发现，父级元素变的没有那么宽了
这是由于position：absolute，float：left/right；会将元素变为inline-block元素
float最原始的作用是用来处理报纸的布局：可以让文字环绕图片
只需要在img标签上加float就可以了
一般使用了float之后 记得要清除浮动，让后面的元素另起一行