说浮动布局，就得先知道文档流，文档流有 正常文档流 、 脱离文档流 。
对应的正常文档流如图，
例如01：
结果：
分析：对div01设置了左浮动，使div01脱离了文档流，div01是在div02的上面一层，实际的div02还是占据了一整行，div02的文字部分看着像被挤出来了，其实这就是文字环绕的实现（文字是英文时有点问题）。
例如02：
只设置后面两个div左浮动
结果：
例如03：
全部设置左浮动，会从左到右依次排列。（right的相反）注意这里出现了父元素高度塌陷，height为0
2.浮动带来的影响
效果如图：对比例3，父元素高度塌陷问题解决
此外，浮动可以用来实现两列布局或多列布局
例如：
结果：
css浮动（float：none | left | right）在网页布局中我们经常使用的属性，也是经常会出现Bug的地方。首先我们要搞清楚为什么要用到float呢?
网页布局中块级元素，在页面中独占一行，自上而下排列，也就是传说中的文档流。
可是我们要实现左右模块该怎么实现，这就需要用到float了，当我把第三个设置左浮动
然后我们在测试第四个也设置左浮动
下面我将第二个和第四个右浮动
我们在测试将第三个浮动取消
可是在做网页布局的时候不想浮动元素影响遮盖下一个元素该怎么解决？
这个时候就需要我们清除浮动（clear：both | left | right）
上面的例子 希望第三个左浮动，第二个和第四个右浮动，第五个不受影响在最下面。
