流動佈局時
父元素含有50px的padding,因爲子元素溢出,所以padding-bottom沒有表現出來。
但實際上,子元素爲了保證處於父盒子的content之中,已經把父盒子撐開了。只是因爲這裏強制對父盒子設置了高度,所以子元素溢出。
我們將滾動條拉到底部,可以發現子元素確實仍在父元素的padding之內。
因此可以說:流動佈局時,父元素設置了固定高,子元素如果高於父盒子,它將溢出,但它相當於隱性地將父盒子撐開了,仍然滿足盒模型的規則,只是要通過拖動滾動條才能看出。
父元素relative, 子元素absolute
父元素relative+子元素absolute,子元素脫離了父盒子的文檔流,不設置left和right的話,從頭部開始處於默認的位置(父盒子content的左上角),所以它在padding-top和padding-left之內。它的高度比父盒子大,但不會撐開父盒子,相當於z-index位於父盒子的上層,一直向下鋪展開,與父盒子的padding-bottom沒有關係。
滾動條拖到最下面,也只是讓我們看到子元素的最底部,父元素的盒子依然在原地巋然不動。
注意:IE瀏覽器下,父元素的padding-bottom和子元素的margin-bottom都將消失。