[請益] 正確/好的float寫法？

[Funitory (不如憐取眼前人)]

        最近在寫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://www.ptt.cc/bbs/Web_Design/M.1439655470.A.F03.html
推 HwangTW: margin 是邊界 padding 是內距
推 HwangTW: http://goo.gl/NlxA2Y relative、absolute的教學
→ HwangTW: 看起來是不會太危險拉
推 hanconquer: 有同感，常常為了元素定位很頭大
推 ericdoctor: 想了解+1
推 HwangTW: 所以樓上兩位是想瞭解定位元素的啥東東？
推 alog: float 用在 display 屬性為 inline 或 inline-block的元素上
→ alog: position 用在 block or inline-block 元素上
→ alog: 危險這件事情 應該先問怎樣為什麼會讓你覺得危險
→ alog: 另外也有為了建立一個較為彈性的grid
→ alog: 用float技巧構成也不是說沒有
→ alog: 至於要不要clear float設定 可以去找clearfix
推 oToToT: 一直用position還是會有問題，我記得我之前有個網站就是這
→ oToToT: 樣，結果明明cssreset了，還是各家瀏覽器會有偏差，最後只
→ oToToT: 能再重寫
推 alog: 那有可能是不熟悉元素特性跟用了不該用的
→ alog: 不然position是相當精準的東西
→ Ageis: @alog position 沒有限用在 block | inline-block
→ Ageis: float 也沒有限用在 inline | inline-block
→ Ageis: 套用 float 的元素，會自動變成 block (可設 width/height)
→ Ageis: 回原po 在float的外層加clear是為了讓外層size可自動調整
→ Ageis: margin 的問題你可能要確定是不是margin collapsing造成的
→ Ageis: 用position並不會危險，用錯才會危險
→ Ageis: 常見的錯誤像用 position 做2(多)欄式排版
→ Ageis: padding 就是內距，常見的問題是因不了解 box-model 造成的
→ oToToT: 疑，所可能以是我當時做錯了什麼喔
推 alog: float 本身就是文繞圖的功能 一直以來沒有人很明確講該用在
→ alog: 什麼元素上
→ alog: 但是今天有人問了 當然只能根據使用的經驗 給點建議
→ alog: 另外上了float並不會變成block元素
→ alog: 那是有另外上屬性為block或inline-block
推 alog: 順便再補充好了
→ alog: 刻版面上 相較於 float， position 在複雜UI上的有更多充分
→ alog: 發揮能力的空間
→ alog: 因為只要配合 width height 以及 top left bottom right 其
→ alog: 中兩組
→ alog: 再配合 margin 屬性就能做到很完美的水平跟垂直的定位
→ alog: 單用利用float 文繞圖排版的做法是沒辦法直接做到垂直定位
→ alog: 你得需要配合其他的屬性才能刻出來
→ alog: 而這方面position較為輕鬆一點 程式碼比較清醒
→ alog: 清晰*
→ alog: 只是position 事先要定義好明確的數值跟屬性 以及跟父元素
→ alog: 的定位關係 若你沒有處理好 是比較容易出現不如預期的結果
→ alog: 此外 position 也不是不能做多欄的grid 我認為這不算什麼危
→ alog: 險或錯誤
→ alog: 只是在最佳解上float有更好的優勢在
→ alog: 相較於 float，position 就我剛講的 設定上會麻煩很多 因為
→ alog: 必須定義清楚每一個欄之間的距離或大小
→ alog: float 則是本身的一些運作特性可以省略很多功夫
推 alog: 而且在維護上 一樣的目標 float 刻出來的比較漂亮
→ alog: 從susy 或是 960 grid 會用float 來實踐就表示那是真的最佳
→ alog: 實踐
→ alog: position 若要挑缺點 其實除了上述的部分
→ alog: 我是覺得維護上要挑對工具
→ alog: position 在複雜ui下的 若是用純粹的css維護
→ alog: 可能在辨別父子元素之間的定位關係 跟設定屬性、計算上會很
→ alog: 複雜
→ alog: 光維護那段code你看到一堆數字就受不了
→ alog: 用scss 來撰寫  利用mixin、變數跟巢狀的code來描述元素樣
→ alog: 式 可以大幅減輕這個問題
→ kattte: 可以請原po 整理一下 alog 大大的回應嗎  不然好大一串XD
→ eggimage: 本人不太喜歡用float, 有需要的地方我盡量都用
→ eggimage: inline-block代替 或是乾脆用別的排版方式
→ Ageis: @alog http://goo.gl/oxizaU
→ Ageis: "When you float an element it becomes a block box"
→ Ageis: @eggimage float 很好啊，幹嘛排擠它 XD
→ Ageis: 原po:我的啟蒙書是這本 http://goo.gl/zmQTk4 可以參考一下
→ Ageis: 對觀念會有很大的幫助
→ alog: @Ageis 對一個已經是Block的區塊做Float 本身就是Block
→ alog: 我覺得他舉的例子可以換別的
→ alog: 不過的確已經變成Block
推 hit1205: 各家瀏覽器會有偏差... 會不會是沒有 <!DOCTYPE>?
推 befdawn: 我也不喜歡用 float，寧願用 relative position
推 befdawn: float 用了真的就是 block 耶!
→ befdawn: http://jsbin.com/tebegohupa/edit?html,css,output
→ befdawn: 受教了！