前言問題
margin collapsing 外邊距合併
block formatting context 塊格式化上下文
解決方案
參考之前在前端開發的過程中，都沒有遇到外邊距合併的問題（其實是因為大多時候都直接用前端樣式庫(〃'▽'〃)），這一次需要動手排乙個頁面，也挺簡單，但是遇到了乙個奇怪的問題，所以學習記錄一下。
測試**如下：
我是吃瓜群眾
我是子div
我是父div
子div設定了margin-top之後，父div也跟著一起margin-top了。
原因如下：
塊的頂部外邊距和底部外邊距有時被組合(摺疊)為單個外邊距，其大小是組合到其中的最大外邊距，這種行為稱為外邊距塌陷(margin collapsing)，或外邊距合併。
外邊距合併的3中基本原因：
1、相鄰的元素
毗鄰的兩個兄弟元素之間的外邊距會合併
2、塊級父元素與其第乙個/最後乙個子元素
3、空塊元素
如果存在乙個空的塊級元素，不存在 border、padding、inline content、height、min-height來隔離上下外邊距，那麼它的上下外邊距將會合併。
bfc（block formatting context 塊格式化上下文）與元素外邊距合併 :
乙個塊格式化上下文（block formatting context） 是web頁面的視覺化css渲染出的一部分。它是塊級盒模型出現的區域，也是浮動元素與其他元素進行互動的區域。
乙個塊格式化上下文由以下之一建立：
知道了問題原因所在，以及了解了相關原理，就很好辦了。
1、給div2設定border
為了不改變div2的大小，還需將設定 box-sizing為border-box將padding和border包含在定義的width和height之內
.div2
2、去掉div2child的margin，改為設定div2的padding
.div2
3、div2設定為內聯元素
.div2
4、清除浮動
所有浮動元素包含在div2內，增加樣式clearfix
.clearfix::before, .clearfix::after
或者建立乙個新的bfc，使其在不同的上下文中，不合併外邊距。
5、給div2設定position
.div2
6、給div2設定float，注意後面的元素需要clear浮動
.div2
7、給div2設定display
.div2
8、給div2設定flex
.div2
9、給div2設定overflow
.div2
萬變不離其宗 BFC 塊級格式上下文
url url 上文已經將的很詳細了，大家可以看看！這裡提另外乙個相關問題 url 我在這篇文章中找到了答案 問題是 有時候我們調子元素的margin top，是想和父元素拉開距離，可事實是和父元素沒拉開距離，反而是父元素與上面拉開了距離，感覺子元素的設定在父元素上起作用，為什麼呢？這是css2.1...
BFC塊級格式上下文
bfc是什麼 bfc block formatting context 塊級格式上下文，是乙個css的布局概念，是頁面視覺化css渲染的一部分，是塊盒子的布局過程發生的區域。bfc的觸發條件 1.浮動元素 元素的float不是none 2.絕對定位元素 元素的position為absolute或fl...
CSS 外邊距合併
做了個div 巢狀div的實驗，父div和子div都有margin邊距 發現margin top 10px 根本不起作用，後來發現是外邊框合併問題，他會合併取兩者大的邊距，如果子div的邊距是30px 那麼父子div還是會貼著 只是，父div外邊距會變成30的效果 外邊距合併指的是，當兩個垂直外邊距...