關於子元素的margin-top對父級容器無效

原理就是重新構建一個bfc盒子。如果不想看那么長，看下面這句話就好了。

剛開始我沒看到這個總結時一直是使用自己摸索出來paddin-top解決，發現該方式並不好。親測給父級加一個overflow不為visiable的屬性就直接解決了，簡單明了。

這是在做布局時的一個經典問題。那這個問題是怎么產生的呢？主要是合並margin的問題，紅色層（子層）的margin-top與黃色層（父層）相合並，產生了共同的margin-top。其實合並margin還有其他的形式，比如說：

1. 父層的margin-top與一系列子層中第一個層的margin-top合並
2. 上層的margin-bottom與下層的margin-top合並，此時margin值為合並margin值中的最大值。至於負margin，就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。如果沒有正margin，就用0減去相鄰margin的絕對值的最大值
3. 層高為0時，自身的margin-top和margin-bottom合並

那如何解決這個問題呢，w3.org給出了思路：

1. 一個浮動的盒與任何其它盒之間的margin不會合並（甚至一個浮動盒與它的流內子級之間也不會）
2. 建立了新的塊格式化上下文的元素（例如，浮動盒與’overflow’不為’visible’的元素）的margin不會與它們的流內子級合並
3. 絕對定位的盒的margin不會合並（甚至與它們的流內子級也不會）
4. 內聯盒的margin不會合並（甚至與它們的流內子級也不會）
5. 一個流內塊級元素的bottom margin總會與它的下一個流內塊級兄弟的top margin合並，除非兄弟有空隙
6. 一個流內塊級元素的top margin會與它的第一個流內塊級子級的top margin合並，如果該元素沒有top border，沒有top padding並且該子級沒有空隙
7. 一個’height’為’auto’並且’min-height’為0的流內塊級盒的bottom margin會與它的最后一個流內塊級子級的bottom margin合並，如果該盒沒有bottom padding並且沒有bottom border並且子級的bottom margin不與有空隙的top margin合並
8. 盒自身的margin也會合並，如果’min-height’屬性為0，並且既沒有top或者bottom border也沒有top或者bottom padding，並且其’height’為0或者’auto’，並且不含行盒，並且其所有流內子級的margin（如果有的話）都合並了

簡單的來講，就是

1. 都用float來定位（有條件要求，適用范圍較廣）
2. 為父元素添加overflow不為visiable 的屬性 （適用范圍極廣，推薦使用）
3. 為元素添加border（一般不用）
4. 使用絕對定位（適用范圍較窄）
5. 父元素增加padding-top屬性（改變尺寸，不建議使用）