今天週六要過來上班，閒來無事就又研究了一下css的問題，前一段時間去面試，被問到邊框塌陷的問題，我是乙個小白，只是知道並沒有深入的去了解，今天在網上查了一下，自己也去敲了一遍，終於有所了解。下面是我寫的乙個demo。
開啟瀏覽器，我想有些小白肯定和我想的一樣，樣式呈現出來如下：
如果認為如上圖的話 那麼你就錯了，其實是下面的樣子：
我一頭霧水的去查了一下，發現是邊框塌陷的問題，因為css中存在乙個margin collapse，即邊界塌陷或者說邊界重疊。對於上下兩個並列的div塊而言，上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值，所以從這個意義上說：css及瀏覽器的設計者們希望我們在布局時，如果遇到上下兩個併排內容塊的安排，最好只設定其中每個塊上或下margin的一處即可。
但對於父塊div內含子塊div的情況，就會按另一條css慣例來解釋了，那就是：對於有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離。所以對於**：
father這個div的高度為0，因為裡面沒有能夠撐開div的內容。如果變為： i am here.
則高度就是文字的高度，因為此時文字在撐著這個div。
話說回來，乙個div和它的子div特別重視垂直邊框或填充，也就好像是，一口鍋，裡面放個盆，能不能扣住裡面的盆，主要看鍋蓋了，垂直邊框或填充就是這個「鍋蓋」。於是解決的方式至少有以下兩種：
結論：
解決父子div中頂部margin cllapse的問題，需要給父div設定：
1、邊框，當然可以設定邊框為透明border:1px solid transparent或border-top:1px solid transparent
2、為父div新增padding，或者至少新增padding-top; 此外，還可以通過over-flow來解決，給父div寫入：over-flow:hidden;
希望對某些小白有所幫助，也希望大佬多多指教。
父級邊框塌陷的問題
clear clear right 右側不允許有浮動元素 clear left 左側不允許有浮動元素 clear both 兩側不允許有浮動元素 clear none 解決方案 1 增加父級元素的高度 father 2 增加乙個空的div標籤，清除浮動 div class clear div cle...
overflow及父級邊框塌陷問題
clear clear right 右側不允許有浮動元素 clear left 左側不允許有浮動元素 clear both 兩側不允許有浮動元素 clear none 解決方案 增加父級元素的高度 father增加乙個空的div標籤，清除浮動 clearoverflow 在父級元素中增加乙個 ove...
前端學習（14）解決父級邊框塌陷的問題
clear clear right 右側不允許有浮動元素 clear left 左側不允許有浮動元素 clear both 兩側不允許有浮動的元素 clear none 解決方案 增加父級元素的高度 father增加乙個空的div標籤，清除浮動 class clear div clearoverfl...