1樓：Cache
上下兩個盒子結構，只給其中乙個盒子加外邊距，比如給上盒子加margin-bottom，或者給下盒子加margin-top
父級結構，給父盒子加overflow：hidden
最近剛學的前端，如果寫的回答有錯誤請指正
2樓：愚昧之主
加乙個父元素，再讓父元素變成BFC太麻煩。外邊距重疊有道理，那麼BFC不重疊不是一樣有道理？還有為什麼只是垂直重疊，沒有水平重疊？
你這裡是兩個非浮動的塊級元素，每個塊級元素佔一行。只有兩個非浮動的塊級元素上下毗鄰，才會垂直邊距重疊。
我的理解：margin垂直重疊的意思大概是每行之間可以設定外邊距，但外邊距就是表示該行與其他行邊界的距離，兩行都有外邊距，那就取其中的最大值。針對的是行，也就是非浮動的塊級元素。
而行與行之間只有垂直的邊距關係。
至於行內元素，或是浮動元素，它們的任何邊距都不會重疊。
那麼，兩個元素其中之一設定為inline-block就不會重疊了。但這種做法可能不太符合設計思想。最好是用padding，或者inline-block元素寬度100%，或者避免margin相向。
3樓：夜夜沉淪
外邊距疊加其實很正常，主要需要解決的是父層div受到子元素的外邊距的影響，導致子元素的外邊距變成了父元素的外邊距，這個比較煩人，我一般的解決辦法是給父元素加padding-top: 1px;這樣就可以解決了。
4樓：安和橋北莉莉安
1、相鄰元素疊加這個比較好理解， 相鄰的兩個元素， 如果它們的上下邊距相遇，即會產生疊加。
2、包含（父子）元素疊加包含元素的外邊距隔著父元素的內邊距和邊框， 當這兩項都不存在的時候， 父子元素垂直外邊距相鄰， 產生疊加。 新增任何一項即會取消疊加。（說白了，就是只要有「東西」阻隔斷子父外邊距，那麼就不會產生邊距的疊加問題，這個東西可能是父標籤中的內容、邊框或者內邊距）
只有普通文件流中塊框的垂直外邊距才會發生外邊距疊加。 行內框、 浮動框或絕對定位框之間的外邊距不會疊加。
5樓：
根據 BFC 的定義，兩個元素只有在同一 BFC 內，才有可能發生垂直外邊距的重疊，包括相鄰元素、巢狀元素。要解決 margin
重疊問題，只要讓它們不在同乙個 BFC 內就行。對於相鄰元素，只要給它們加上 BFC 的外殼，就能使它們的 margin
不重疊；對於巢狀元素，只要讓父級元素觸發 BFC，就能使父級 margin 和當前元素的 margin 不重疊。
在上面的例子中，為了使紅框和綠框的外邊距不重疊，就在它們外部包裹一層 container，並觸發 BFC。
6樓：yaway
最近也在重溫相關標準.
## 先說解決方法:
把這兩個 分別放進兩個建立了 BFC (IE7- 觸發 hasLayout)的父級容器裡.
demo
小倪 和 克軍 說的都沒錯，不過有一點需要明確：需要建立 BFC 的不是這兩個 而是它們所在的父級容器.
## 再看看標準(自己翻譯的版本)：
邊距疊加條件
兩個外邊距僅在以下情況下疊加：
都屬於常規文件流(in-flow)中的 block-level boxes，而且處於同乙個 BFC
沒有 line boxs 、clearance、padding 或者 border 將其分隔(certain zero-height line boxes 除外)
都屬於垂直方向上相鄰的盒子的相鄰外邊距，例如：
某盒的上邊距和其首個在常規文件流中的子元素的上邊距
某盒的下邊距和其下個在常規文件流中的兄弟元素的上邊距
height 為 auto 的父級元素的下邊距和其最後乙個在常規文件流中的子元素的下邊距
某盒子沒有建立新 BFC、min-height 為 0、height 為 auto 或 0、沒有常規文件流子元素，其上下邊距
建立塊級格式化上下文
以下下情況下都會為它們的內容建立新的BFC（塊級格式化上下文）：
浮動元素和絕對定位元素
非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）
overflow 屬性不為「visiable」的塊級盒
## 自己的理解：
根據標準給出的建立 BFC 的方法，demo 中的 ein 盒和 zwei 盒(為它們的內容)建立了新的BFC，因此分別處於兩個 BFC 中的 box-a 和 box-b 不滿足邊距疊加條件，邊距不疊加.
而drei 盒和 vier 盒出現了外邊距疊加. 根據標準中的邊距疊加條件，兩盒需要在同乙個BFC中.
## 那麼問題來了(很遺憾，這裡沒有挖掘機)：
它們處在哪乙個 BFC 中呢？
回覆中有人說：
The html element is located in the initial containing block which always establishes a block formatting context.
Google到一篇中文部落格：CSS BFC和IE Haslayout介紹
裡面寫到：
從上面的定義我們可以看到Document顯示HTML元素的方式和BFC的定義很像，其實我們可以認為Document就是最大的乙個擁有BFC的元素了。
暫時引用 stackoverflow 上 BoltClock 的說法作為結論：
initial containing block 建立了乙個 BFC ，使其中的盒產生了邊距疊加.
待完善，繼續查標準..
* 專業知識有限，標準中不確定標準中文名稱的專有名詞未翻譯、並給出鏈結，以防謬誤.
7樓：貘吃饃香
生成 BFC 的元素不會和在流中的子元素發生空白邊摺疊。 不管毗鄰的兄弟的。毗鄰兄弟元素不摺疊由 Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
Margins of inline-block boxes do not collapse (not even with their in-flow children).
它們決定。
話說，http://
w3help.org
都放出來 2 年多了吧，咋就沒啥前端去好好看呢，貌似裡面有些明顯的錯誤也沒人提過。
8樓：賀師俊
我想說，這其實並不（只）是乙個技術問題，而是乙個設計問題。你應該去問一下，為什麼這裡上下是margin？設計師在這裡表達的是什麼？
是否真的應該用margin而不是padding或者border？
9樓：張克軍
觸發block formatting context即可，觸發的方法：
1. float不為none
2. overflow不為visible3. display設為『table-cell』, 『table-caption』, 或『inline-block』
4. position既不是static也不是relative5. zoom:1, IE的hasLayout特性會建立乙個新的block formatting context
如何解決債務問題？
風影 合理負債，然後合理去還債。當債務不合理時，可以先去想一些事，還有就是坦然面對。三十年河東，三十年河西。說起負債，想起兒時的趣事。五歲時，父母還是長輩給的五十元錢 小小年紀就愛錢 對於自己的東西想支配 然後我親愛的母親因為買啥把我的錢拿走了。當時應該是覺得自己很委屈吧。然後生我媽的氣，就坐屋簷下...
如何解決偏科問題？
引起孩子偏科的原因，一般有以下幾種 1.隨著年齡的增長，孩子都會形成自己的思想和行為習慣，都會有獨特的興趣，並朝著自己所喜愛的方面發展。此外，孩子的邏輯思維能力也在不斷提高，有些孩子在數學方面將自己的能力發揮得淋漓盡致，卻對英語這一需要大量背 讀 記 寫的學科感到厭煩，因此造成了偏科。2.有些孩子覺...
如何解決隊友划水的問題？
圓圓學長 隊友划水這個問題在大學期間是非常常見的，畢竟每個人對自己的要求和團隊意識不同。建議從以下三個方面解決問題 01找好隊友，可以不以寢室為單位 02找對隊友，選擇興趣相投 了解清楚的人 找對隊友是完成任務的關鍵，整個過程也會非常愉悅，大家都能有所收穫。你可以找成績優秀的同學 可以找興趣相投的同...