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 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

若是包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」