Float对于文字，对于块状元素是怎样浮动的！

float是浮动

可以分为float:left ; float:right;

浮动可以使自身浮动起来，原先的位置可以不再占有。块状元素可以顶替他的位置！

通俗来讲，一群人排成一队做凳子，前面的人站起来走了（加了浮动），后面的人就可以坐下啦！（占领他原先的位置）

先看文字！！！

但是，浮动一开始被研发时的作用就是搭配文字使用，使文字环绕图片显示！

这是不加浮动的时候！

可以看到浮动是让文字环绕在图片周围使用的！

但他的本质是文字还是在图片下面，只不过文字前面的图片把他挡住了而已！

上图！上图！

这是两个块状元素的盒子，没有加浮动。

div {
     width: 200px;
     height: 200px;
     background-color: pink;
     border: 1px solid blue;
}

上面的盒子加了浮动，他原先的位置不在占有，下面的盒子就把他原先的位置占有！

div {
     width: 200px;
     height: 200px;
     background-color: pink;
     border: 1px solid blue;
}
.box1 {
      float: left;
}

相信看到这些图片各位大佬应该都明白了！

小编也是研究了好一会才研究出来的！

希望我做的能对你有些帮助！