作者Funitory (不如憐取眼前人)
看板Web_Design
標題[請益] 正確/好的float寫法？
時間Sun Aug 16 00:17:48 2015
最近在寫CSS的時候覺得自己只是在鬼畫符
就雖然寫是寫得出來 可是感覺好像就亂寫一通
想要知道有沒有哪邊有教
"什麼時候應該用float、float該怎麼分配適合"
例如說 logo link link link
左 右 右 右
換成 左 左 左 左
其實也可以寫的視覺上看起來一樣 但是就是不知道哪種寫法比較好
然後float元素一排寫完之後下面的東西好像margin就有點難抓@ @
是不是該加個 <div style"clear:both;">
"一直用relative、absolute來定位，網頁是不是很危險"
這個還蠻好用的可是怕用太多會混亂
"什麼時候應該用padding、margin"
因為很多時候一個沒有底色的東西
用padding跟margin外表看起來是一樣的..
買的書大多是一項一項教，比較沒有教整個排起來應該怎麼寫得"好"的
（寫出來我會，但是就是怕寫的差）
想請教大家能否推薦有什麼好的學習網站可以把這些觀念學好呢？
還請大家多多指教，謝謝～～～ m(__ __)m
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.224.223.4
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1439655470.A.F03.html
1F：推 HwangTW: margin 是邊界 padding 是內距 08/16 00:53
3F：→ HwangTW: 看起來是不會太危險拉 08/16 00:59
4F：推 hanconquer: 有同感，常常為了元素定位很頭大 08/16 06:09
5F：推 ericdoctor: 想了解+1 08/16 07:39
6F：推 HwangTW: 所以樓上兩位是想瞭解定位元素的啥東東？ 08/16 07:54
7F：推 alog: float 用在 display 屬性為 inline 或 inline-block的元素上 08/16 08:02
8F：→ alog: position 用在 block or inline-block 元素上 08/16 08:02
9F：→ alog: 危險這件事情 應該先問怎樣為什麼會讓你覺得危險 08/16 08:02
10F：→ alog: 另外也有為了建立一個較為彈性的grid 08/16 08:03
11F：→ alog: 用float技巧構成也不是說沒有 08/16 08:03
12F：→ alog: 至於要不要clear float設定 可以去找clearfix 08/16 08:04
13F：推 oToToT: 一直用position還是會有問題，我記得我之前有個網站就是這 08/16 09:46
14F：→ oToToT: 樣，結果明明cssreset了，還是各家瀏覽器會有偏差，最後只 08/16 09:46
15F：→ oToToT: 能再重寫 08/16 09:46
16F：推 alog: 那有可能是不熟悉元素特性跟用了不該用的 08/16 09:58
17F：→ alog: 不然position是相當精準的東西 08/16 09:59
18F：→ Ageis: @alog position 沒有限用在 block | inline-block 08/16 12:22
19F：→ Ageis: float 也沒有限用在 inline | inline-block 08/16 12:23
20F：→ Ageis: 套用 float 的元素，會自動變成 block (可設 width/height) 08/16 12:24
21F：→ Ageis: 回原po 在float的外層加clear是為了讓外層size可自動調整 08/16 12:27
22F：→ Ageis: margin 的問題你可能要確定是不是margin collapsing造成的 08/16 12:27
23F：→ Ageis: 用position並不會危險，用錯才會危險 08/16 12:28
24F：→ Ageis: 常見的錯誤像用 position 做2(多)欄式排版 08/16 12:29
25F：→ Ageis: padding 就是內距，常見的問題是因不了解 box-model 造成的 08/16 12:31
26F：→ oToToT: 疑，所可能以是我當時做錯了什麼喔 08/16 15:03
27F：推 alog: float 本身就是文繞圖的功能 一直以來沒有人很明確講該用在 08/16 16:36
28F：→ alog: 什麼元素上 08/16 16:36
29F：→ alog: 但是今天有人問了 當然只能根據使用的經驗 給點建議 08/16 16:36
30F：→ alog: 另外上了float並不會變成block元素 08/16 16:37
31F：→ alog: 那是有另外上屬性為block或inline-block 08/16 16:38
32F：推 alog: 順便再補充好了 08/16 17:16
33F：→ alog: 刻版面上 相較於 float， position 在複雜UI上的有更多充分 08/16 17:16
34F：→ alog: 發揮能力的空間 08/16 17:16
35F：→ alog: 因為只要配合 width height 以及 top left bottom right 其 08/16 17:17
36F：→ alog: 中兩組 08/16 17:17
37F：→ alog: 再配合 margin 屬性就能做到很完美的水平跟垂直的定位 08/16 17:17
38F：→ alog: 單用利用float 文繞圖排版的做法是沒辦法直接做到垂直定位 08/16 17:17
39F：→ alog: 你得需要配合其他的屬性才能刻出來 08/16 17:17
40F：→ alog: 而這方面position較為輕鬆一點 程式碼比較清醒 08/16 17:18
41F：→ alog: 清晰* 08/16 17:18
42F：→ alog: 只是position 事先要定義好明確的數值跟屬性 以及跟父元素 08/16 17:19
43F：→ alog: 的定位關係 若你沒有處理好 是比較容易出現不如預期的結果 08/16 17:19
44F：→ alog: 此外 position 也不是不能做多欄的grid 我認為這不算什麼危 08/16 17:19
45F：→ alog: 險或錯誤 08/16 17:19
46F：→ alog: 只是在最佳解上float有更好的優勢在 08/16 17:19
47F：→ alog: 相較於 float，position 就我剛講的 設定上會麻煩很多 因為 08/16 17:20
48F：→ alog: 必須定義清楚每一個欄之間的距離或大小 08/16 17:20
49F：→ alog: float 則是本身的一些運作特性可以省略很多功夫 08/16 17:21
50F：推 alog: 而且在維護上 一樣的目標 float 刻出來的比較漂亮 08/16 17:23
51F：→ alog: 從susy 或是 960 grid 會用float 來實踐就表示那是真的最佳 08/16 17:24
52F：→ alog: 實踐 08/16 17:24
53F：→ alog: position 若要挑缺點 其實除了上述的部分 08/16 17:25
54F：→ alog: 我是覺得維護上要挑對工具 08/16 17:25
55F：→ alog: position 在複雜ui下的 若是用純粹的css維護 08/16 17:25
56F：→ alog: 可能在辨別父子元素之間的定位關係 跟設定屬性、計算上會很 08/16 17:26
57F：→ alog: 複雜 08/16 17:26
58F：→ alog: 光維護那段code你看到一堆數字就受不了 08/16 17:26
59F：→ alog: 用scss 來撰寫 利用mixin、變數跟巢狀的code來描述元素樣 08/16 17:27
60F：→ alog: 式 可以大幅減輕這個問題 08/16 17:27
61F：→ kattte: 可以請原po 整理一下 alog 大大的回應嗎 不然好大一串XD 08/16 23:46
62F：→ eggimage: 本人不太喜歡用float, 有需要的地方我盡量都用 08/17 17:08
63F：→ eggimage: inline-block代替 或是乾脆用別的排版方式 08/17 17:08
65F：→ Ageis: "When you float an element it becomes a block box" 08/17 21:11
66F：→ Ageis: @eggimage float 很好啊，幹嘛排擠它 XD 08/17 21:13
68F：→ Ageis: 對觀念會有很大的幫助 08/17 21:18
69F：→ alog: @Ageis 對一個已經是Block的區塊做Float 本身就是Block 08/17 21:39
70F：→ alog: 我覺得他舉的例子可以換別的 08/17 21:39
71F：→ alog: 不過的確已經變成Block 08/17 21:40
72F：推 hit1205: 各家瀏覽器會有偏差... 會不會是沒有 <!DOCTYPE>? 08/20 09:31
73F：推 befdawn: 我也不喜歡用 float，寧願用 relative position 08/24 00:43
74F：推 befdawn: float 用了真的就是 block 耶! 08/24 00:47
76F：→ befdawn: 受教了！ 08/24 00:47