浮动定位是指
- 将元素排除在普通流之外，即元素将脱离标准文档流
- 元素将不在页面占用空间
- 将浮动元素放置在包含框的左边或者右边
- 浮动元素依旧位于包含框之内
建立几个div盒子标签
如图：
<div class="a" style="width: 200px;height: 150px;background:blue;">
<p>框1</p>
</div>
<div style="width: 200px;height: 150px;background:red;">
<p>框2</p>
</div>
<div style="width: 200px;height: 150px;background:purple;">
<p>框3</p>
</div>
上述不浮动的框
接下来给框1加上右浮
如图：
.a{float: right;}
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
再来给框1加上左浮
如图：
.a{float: left;}
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。文本是占据空间的，不会跟着框2上浮，所以会掉下来。
下面给所有框加上左浮
如图：
