起因：在進行bootstrap的.navbar-brand內文字設置垂直居中時采用line-height=高度，無法居中，發(fā)現(xiàn)源碼.navbar-brand 設置了 padding: 15px 15px;（默認導航高度為50），于是居中應該是等于高度-30，解決過程中寫了幾個div用于檢測問題，結果遇到了以下問題，經(jīng)過數(shù)小時的研究（時間大多花費在百度與谷歌上，以及研究原因上），于是寫下這篇文章做個總結，加深個人記憶。
我寫了兩個div，從上往下分別標記為div1和div2，設置了相同的margin與高寬，然后給div1設置左浮動。那么根據(jù)我薄弱的基礎判斷，這時候刷新頁面應該出現(xiàn)的是兩個div重疊在一起，只顯示一個div，但是結果出現(xiàn)了偏差，兩個div并沒有疊加顯示，并且div1出現(xiàn)在了div2下方。
（F5后的顯示）
預期的結果并沒有出現(xiàn)，然后開始排查寫的代碼，發(fā)現(xiàn)問題出現(xiàn)在margin上，清除div的maring后元素顯示正常，不會出現(xiàn)錯位。
（清除了margin之后的正常狀態(tài)）
由于margin-left是正常的，所以顯然是margin-top的設置出現(xiàn)了些問題，于是推理查找問題，n分鐘后得出如下結論
正常文檔流狀態(tài)下，div1浮動，脫離了文檔流，然后div2這時候依舊處在文檔流狀態(tài)，于是向上移動至div1浮動前的位置，這時候body的位置發(fā)生改變，向下移動了div2設置的margin-top的距離，（又一個問題出現(xiàn)了，為什么div2設置的margin能夠改變body的位置，或者說是父元素的位置！好吧，這個問題經(jīng)過百度與測試后發(fā)現(xiàn)是個固有問題，在文章末尾做詳細說明）。
（藍色部分是body）
而div1這時候處于浮動狀態(tài)，由于同樣設置了margin，所以浮動后同樣會改變位置，div1浮動后根據(jù)body的位置重新進行定位，所以div1浮動后，兩個div的位置不會重合。（解決方法-給body添加padding-top，或者border——詳情見結尾。）
（可以很明顯看出div2根據(jù)body進行了margin定位）
兩個div的css如下：
{ :; :; :; :; :; }
{ :; :; :; :; }
延伸閱讀
學習是年輕人改變自己的最好方式