理解float

float本来是为了实现图文四周环绕这种类似的效果才出现，而不是为了布局，float会使元素脱离文档流，但不会脱离文本流，也就是说浮动元素的文本和非浮动元素的文本是在同一层级的，看情况二

怎么理解浮动？

浮动框脱离了普通的文档流，就好像是飘在普通的文档流之上
浮动：简单的理解，就是本来两个人（甲、乙）在排队，但是假设加上向左浮动的属性，就相当于它往左边靠，假设乙没加浮动，那么就相当于甲是在同一个地点的第二层，乙在第一层，也就是甲浮在乙上面，如果乙也加了浮动，那两个人都在第二层拉着小手，是并在一起的。
来看一下具体的代码
HTML结构都是这样的：

<div class="box1">如果说你是</div>

<div class="box2">海上的烟火，我是浪花的泡沫</div>

情况一：
都是块级，没有浮动的情况
CSS：

    .box1{
        height:50px;
        width:50px;
        background-color:purple;
    }
    .box2{
        height:100px;
        width:100px;
        background-color:pink;
    }

情况如下

image.png

情况二：

    .box1{
        height:50px;
        width:50px;
        background-color:purple;
        float:left;
    }

给box1增加float:left属性，那么box1就会脱离文档流，浮在第二层（脱离了原来的世界），此时对于box2来说，box1是不存在的，完全不会box2的布局产生影响，跟他不是在一个世界的。那么box2就按照没有box1的正常文档流来显示。此时加了浮动属性的box1是浮在第二层的。
float本来是为了实现图文四周环绕这种类似的效果才出现

image.png

情况三：

    .box1{
        height:50px;
        width:50px;
        background-color:purple;
        float:left;
    }
    .box2{
        height:100px;
        width:100px;
        background-color:pink;
        float:left;
    }

那么box1，box2都脱离了文档流，他们在另外一个世界又相遇了！！

image.png

这个也是很多人拿来做布局的一个方法。