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