说浮动布局，就得先知道文档流，文档流有 正常文档流 、 脱离文档流 。
对应的正常文档流如图，
例如01：
结果：
分析：对div01设置了左浮动，使div01脱离了文档流，div01是在div02的上面一层，实际的div02还是占据了一整行，div02的文字部分看着像被挤出来了，其实这就是文字环绕的实现（文字是英文时有点问题）。
例如02：
只设置后面两个div左浮动
结果：
例如03：
全部设置左浮动，会从左到右依次排列。（right的相反）注意这里出现了父元素高度塌陷，height为0
2.浮动带来的影响
效果如图：对比例3，父元素高度塌陷问题解决
此外，浮动可以用来实现两列布局或多列布局
例如：
结果：
如果不采用float，不妨考虑Flex布局
这几种布局都可以简单实现，换行的话也是一行代码即可，如下图
以下是一个简单的flex布局：
<!--思路：让原本每个子div都占据一行的变成五个一共占一行，在不使用float的情况下，使用flex去实现--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.content{ display:-webkit-flex display:flex} /*Flex布局*/
/*注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*/
</style>
<body>
<!--设置若干个div，content下的div在flex 的作用下，都会往左浮动-->
<div class="content"> <!--设置类名-->
<div>1</div><!--设置5个div-->
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
