我们一步步来看看float属性是如何实现文字环绕效果的。先看看子元素不设置float属性：
<html>
<head>
<style type="text/css">
.div1{
width: 200px;
outline: 2px red solid;
}
.div2{
width: 100px;
height: 200px;
background-color: royalblue;
/* float: left; */
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>text</div>
</div>
<script>
</script>
</body>
</html>渲染出来的效果如下：
父元素没有设置高度，由两个子元素撑起了高度，两个子元素是块级元素所以用两行来显示。现在设置第一个子元素div2 左浮动(把上边的代码注释去掉)，效果如下：
第一个子元素div2左浮动后，脱离了文档流，由第二个子元素撑起父元素的高度，造成了父元素高度塌陷，且第二个子元素容器里面的文字内容不是从容器最左侧显示，而是紧挨着第一个浮动元素来显示，所以产生了文字环绕效果。
