作者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/cn.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