※ 引述《befdawn (貝夫洞)》之銘言：
: 各位好，最近在 udemy 初學 CSS，想請求前輩指點一二
: 這是我練習打的碼
: http://jsbin.com/robupe/1/edit?html,output
: 1. 請問關於階層問題，
: 為何 background-color: #eee; 要放在 #bar li，不能放在 #bar 或者 #bar ul 內呢？
: 2. 同樣地，
: 為何 margin: 0; 要放在 #bar ul 內，不能放在 #bar 或者 #bar li 內呢？
: 3. 究竟該怎麼看待這樣的階層與屬性的關係？目前找不到邏輯，只知道試三次總會成功
: ，但想找個可尋之法。（感覺需要經驗去累積？Orz）
: 先謝謝各位前輩了！
因為子元素用float
母元素沒辦法被子元素撐開
你開dev tool去看ul跟#bar的box-model就知道了
height=0
最常用的應該是overflow
其他你看這篇文章
https://css-tricks.com/all-about-floats/

謝謝回覆！我知道為何背景不能用在 #bar 的原因了（母元素的 #bar 與 #bar ul 會沒有東西包住）但還是不太理解 margin: 0; 不能放在其他兩處的原因？

2.每個元素有自己的 margin ,會放在 ul 是因爲他原本自是有預設的margin，因爲在此是要拿來做選單，所以把他全清掉。div 及 li margin 預設就是 0 所以才沒有特別去清除預設值

了解！！ 太感謝！想順便問 overflow 也是這部分的嗎？感覺有點像是分段落（格式的分段落？）

個人建議，可以用normalrize.css之類，拿掉那些預設樣式可以讓你少踩一堆地雷

ul li 一開始只是符號清單，ul前方會有 margin是很正常的，只是被我們拿來做成選單所以才需要清除預設。不過若要做跨瀏覽器的話，就建議去查 reset.css了每個人觀念都不大相同，提出我的建議參考參考overflow 一開始只是照它字面上的定義，只是可以清除float 的附加效果吧 XDDD建議原 PO 去更仔細的看 float 的使用與清除會比較好

謝謝建議!!:D