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