css float（浮動）

標籤：影響   unset   one   映像   oba   上下   rtl   blank   family   

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用於映像，但它在布局時一樣非常有用。

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。浮動元素之前的元素將不會受到影響。

注釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

文法

float: left;float: right;float: none;float: inline-start;float: inline-end;/* Global values */float: inherit;float: initial;float: unset;

left：是一個關鍵字，表示元素必須在其包含塊的左側浮動。

right：是一個關鍵字，表示該元素必須浮動在其包含塊的右側。

none：是一個關鍵字，預設值，表示該元素不能浮動。

inherit：規定應該從父元素繼承 float 屬性的值。

inline-start ：是一個關鍵字，表示元素必須在其包含塊的起始側浮動，即在ltr指令碼的左側和rtl指令碼的右側。

inline-end ：是一個關鍵字，表示元素必須在其包含塊的末端浮動，即在ltr指令碼的右側和rtl指令碼的左側。

清除浮動

元素浮動之後，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側不能出現浮動元素。

clear:both;

 

 

參考：

• MDN：float：瞭解 CSS float 屬性的基本知識
• 菜鳥教程CSS Float(浮動)
• W3School CSS float 屬性

css float（浮動）