我們都知道，在CSS的盒模型中，當子容器設定了margin-top之後，父容器也會受到相應的影響，如下圖所示，這是我們部門新來的一個員工寫的頁面，然後碰到了這個問題：
要解決這種情況，通常情況下我們會採用父容器的padding屬性來替代子容器的margin屬性。那麼，有沒有別的辦法可以解決這個問題呢？ 答案是有的！ 我們發現此時的父容器並沒有使用border屬性或padding屬性，可是當我們加上這兩個屬性中的某一個之後，上面所說的這種現象消失了！！更直接的說起作用的應該是padding-top或border-top-style 這兩個屬性。
如上兩圖所示。當我們使用border或padding中的任意一個屬性時，這種現象就消除了。 但是border-top或padding-top寬度必須至少1畫素才行。 於是，利用css盒模型的特點，我們可以將父容器的高度減1畫素，padding-top加1畫素或border-top設定為1畫素即可。 補充：上面說的這種解決方案並非最合適，最近看了下BFC相關規範，突然聯想到這個問題，原來只需要對外層容器觸發BFC佈局即可。觸發BFC方式有很多，這裡最恰當的應該是overflow:hidden了。