關於元素設置margin-top能夠改變body位置的原因及解決（子元素設置margin-top改變父元素定位）
起因：在進行bootstrap的.navbar-brand內文字設置垂直居中時采用line-height=高度，無法居中，發現源碼.navbar-brand 設置了 padding: 15px 15px;（默認導航高度為50），於是居中應該是等於高度-30，解決過程中寫了幾個div用於檢測問題，結果遇到了以下問題，經過數小時的研究（時間大多花費在百度與谷歌上，以及研究原因上），於是寫下這篇文章做個總結，加深個人記憶。
我寫了兩個div，從上往下分別標記為div1和div2，設置了相同的margin與高寬，然后給div1設置左浮動。那么根據我薄弱的基礎判斷，這時候刷新頁面應該出現的是兩個div重疊在一起，只顯示一個div，但是結果出現了偏差，兩個div並沒有疊加顯示，並且div1出現在了div2下方。
（F5后的顯示）
預期的結果並沒有出現，然后開始排查寫的代碼，發現問題出現在margin上，清除div的maring后元素顯示正常，不會出現錯位。
（清除了margin之后的正常狀態）
由於margin-left是正常的，所以顯然是margin-top的設置出現了些問題，於是推理查找問題，n分鍾后得出如下結論
正常文檔流狀態下，div1浮動，脫離了文檔流，然后div2這時候依舊處在文檔流狀態，於是向上移動至div1浮動前的位置，這時候body的位置發生改變，向下移動了div2設置的margin-top的距離，（又一個問題出現了，為什么div2設置的margin能夠改變body的位置，或者說是父元素的位置！好吧，這個問題經過百度與測試后發現是個固有問題，在文章末尾做詳細說明）。
（藍色部分是body）
而div1這時候處於浮動狀態，由於同樣設置了margin，所以浮動后同樣會改變位置，div1浮動后根據body的位置重新進行定位，所以div1浮動后，兩個div的位置不會重合。（解決方法-給body添加padding-top，或者border——詳情見結尾。）
（可以很明顯看出div2根據body進行了margin定位）
兩個div的css如下：
1 div:nth-child(1){ 2 float: left; 3 margin: 50px; 4 width: 200px; 5 height: 200px; 6 border: 10px solid #000; 7 }
8 div:nth-child(2){ 9 margin:50px; 10 width: 200px; 11 height: 200px; 12 border: 10px solid #000; 13 }
關於子元素的margin-top會改變父級元素的位置，（也就是div2的margin-top改變了body位置），以下。
這個問題發生的原因是根據規范，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。再說了白點就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。 對於垂直外邊距合並的解決方案上面已經解釋了，為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這個問題。