浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
浮動框浮動後，將脫離原來的普通文件流，並且不會占用空間，層級會高於普通文件流。
浮動元素會生成乙個塊級框，而不論它本身是何種元素。
浮動元素一般要指定乙個明確的寬度；否則，它們會盡可能地窄。
屬性名稱 取值 描述
float
left,right,none 使元素向左或向右浮動
clear
left,right,both,none 規定元素的哪一側不允許其他浮動元素
請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
假設希望讓乙個浮動到文字塊的左邊，並且希望這幅和文字包含在另乙個具有背景顏色和邊框的元素中。
因為浮動元素脫離了文件流，所以包圍和文字的 div 不佔據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear(清除浮動)。
前端學習筆記（六）CSS浮動
頁面布局方式主要包含 文件流 常規流 浮動流 脫離文件流 文件流 文件流中元素框的位置由元素在html中的位置決定，塊級元素從上到下依次排列，框之間垂直距離由框的垂直margin計算得到，行內元素在一行中水平布置。文件流就是html文件中的元素如塊級元素 行內元素依據他們的顯示屬性按照在文件中的先後...
CSS學習筆記 浮動
float left float right float none css的float 屬性可以使乙個元素脫離正常的文件流，然後被安放到它所在容器的的左端或者右端，並且其他的文字和行內元素圍繞它安放。除了left和right，float還有乙個屬性 none，用來防止元素浮動。有一些列特定規則控制著...
HTML筆記（六）CSS 浮動 定位
css浮動 1.定義 定義元素框相對於其正常位置應該出現的位置 2.分類 3.浮動定位指 將元素排除在普通流之外 元素將不在頁面中佔據空間 將浮動元素放置在包含框的左邊或者右邊 浮動元素依舊位於包含框之內 浮動的框可以向左或者向右移動，直到他的外邊緣碰到包含框或另乙個浮動框的邊框為止。4 浮動 fl...