css 使用display：inline-block的問題求解？

01-06

兩個div 都設置 display：inline-block，是這樣的，很正常
但是在第二個div裡面加一個塊級元素或者內聯元素，就變成這樣了
應該是因為第二個div裡面的元素需要在文檔流佔據位置從而影響了父級元素的位置。是不是這樣？有沒有什麼方法讓子元素只在父級元素內部產生影響，而不是對父級元素也有影響。還有如果第一個div裡面也加上和第二個div一樣東西，這種影響就消失了。

解決問題的是方式是：

給第二個 div 設置 vertical-align: top;

導致這樣的問題出現的原因是， inline-block 的默認屬性是 vertical-align: baseline;

根據 w3c 的文檔 Visual formatting model details ，正常情況下， vertical-align: baseline; 以父元素的基線對齊. 但 inline-block 對齊的基線與上下文有關，具體更詳細的就不了解了.

所以當第一個 div 增加一行文本的時候，影響第二個 div 的對齊的基線，所以兩者對齊。但是當第一個 div 增加多行文本的時候就無效了.

所以一般解決方式是給 inline-block 設置 vertical-align: top;

http://stackoverflow.com/questions/12950479/why-does-inline-block-element-having-content-not-vertically-aligned

我一般解決方案是把外面那個【藍色那個框】設置 overflow:hidden

嘗試解答一下，因為dib是基線對齊，而且由於兩個div都沒有形成bfc，所以div2中文字要對齊div1的基線，div2隻能下去了。加了oh以後形成了bfc，所以內外之間就互不干擾

先給出一段關於行內塊級元素(inline-block)中基線(baseline)的定義：

The baseline of an 『inline-block』 is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 『overflow』 property has a computed value other than 『visible』, in which case the baseline is the bottom margin edge.

翻譯一下：

對於一個 inline-block 元素，如果它內部沒有內聯元素，或者它的overflow屬性不是visible，那麼它的linr-height就是元素margin的底端。否則，就是它內部最後一個元素的基線。

然後上下圖：

對於以上三個矩形框可以很好的解釋這條規範。最前面的 x 是用來展示這個 line-box（就是代碼中最外層的div）的基線。左起第一個矩形內部有文字，屬於內聯元素，那麼第一個inline-block的基線為內部x的基線，第二個inline-block的內部無內聯元素，那麼它的基線就是margin的底端，第三個inline-block內部有內聯元素，但是他的overflow屬性為hidden，不是visible，所以它的基線還是margin的底端。

這是官方給出的答案（參考："Visual formatting model details"）：

The baseline of an "inline-block" is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its "overflow" property has a computed value other than "visible", in which case the baseline is the bottom margin edge.

解釋一下：因為一個display為inline block的inline-level box的baseline其實就是它裡面的正常流中的最後一個line box的baseline，可以說這個inline level box和這個line box是公用一條baseline的，如下面這張來自http://w3.org的圖，inline level box默認的vertical－align值是baseline的：

也就是inline level box默認baseline對齊，因此當在給一個inline block的元素裡面放一個inline level元素時，會出現題主所說的那種情況（補充一句：當在inline block元素裡面放塊元素時好像沒有那種情況發生，至少我沒試出來，不知道題主是怎麼放的）而按照上面我所引用的那段官方文檔描述，官方文檔所提供的解決辦法則是給這個inline block的元素一個overflow不為visible的overflow值，或者最終計算值為不為overflow：visible的overflow值也行