CSS切版－－float

The CSS float property specifies how an element should float.

float 只看 margin, padding, width, height , border ，會和之後的元素並排

屬性
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent
inline-start - The element must float on the start side of its containing block. That is the left side with ltr scripts, and the right side with rtl scripts.
inline-end - The element must float on the end side of its containing block. That is the right side with ltr scripts, and the left side with rtl scripts.

優點
1. 簡單的實現文字繞圖效果
2. 不像 flex 需要再用一層父元素包覆

缺點
1. 屬性不像 flex 多元彈性，僅有左右擺放和繼承
2. 會被父元素視作不占空間
3. 視窗不同大小會跑版

注意事項
只會影響接下來的元素，而不會對之前的元素造成效果，所以 HTML 的擺放位置要確認
float 會把部分 display 改為 block
flex 會忽略子元素的 float (在Android 4.1.1 有顯示錯誤的情況)

目標、用途
文字繞圖或並排

使用練習
與 display: inline; 搭配造成的跑版現象
https://codepen.io/gckwgajz-the-decoder/pen/yLbeEay

相容性

from “can I use…” : https://caniuse.com/?search=float

參考資料：
Day10 「浮動？我也會漂浮？」 ─ 淺談 float 浮動效果
https://ithelp.ithome.com.tw/articles/10194545
w3schools
https://www.w3schools.com/css/css_float.asp
MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/float