Float浮动定位

浮动定位是指

• 将元素排除在普通流以外，即元素将脱离标准文档流
• 元素将不在页面占用空间
• 将浮动元素放置在包含框的左边或者右边
• 浮动元素依旧位于包含框以内

创建几个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上浮，因此会掉下来。

下面给全部框加上左浮

如图：

把全部三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

若是包含框太窄，没法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。若是浮动元素的高度不一样，那么当它们向下移动时可能被其它浮动元素“卡住”