外邊距坍塌的三種情況及其解決方法
同級相鄰元素
空塊元素
fc的全稱是：formatting contexts，是w3c css2.1規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。滿足以下任意一條就可以：bfc其全英文拼寫為 block formatting context ，直譯為「塊級格式化上下文」，bfc就是頁面上的乙個隔離的渲染區域，容器裡面的子元素不會在布局上影響到外面的元素，反之也是如此。
塊級元素的上下外邊距有時候會合併，合併後的外邊距等於合併前兩個外邊距中的較大值，這種現象稱為外邊距塌陷。外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距，而左右外邊距不合併。外邊距塌陷有以下三種情況：在css當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。
注釋：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。
這種情況也叫做子元素越界或者margin越界（第乙個子元素的margin-top和最後乙個子元素的margin-bottom的越界問題）：
如果塊級父元素中，不存在border, padding（當上border及上padding寬度為0時）, 行內元素以及清除浮動這四條屬性，那麼這個塊級元素和其第乙個子元素的上外邊距（margin-top）就可以說」挨到了一起「。此時這個塊級父元素和其第乙個子元素就會發生上外邊距塌陷現象。
類似地，若塊級父元素的下外邊距（margin-bottom）與它的最後乙個子元素的下外邊距之間沒有父元素的border, padding, 行內元素，height, min-height, max-height分隔時，就會發生下外邊距塌陷現象。
同樣的：
class
="module"
>
class
="father"
>
class
="son"
>
div>
div>
div>
*.module
.father
.son
這三個方法同樣適用於解決下面的兩種外邊距坍塌的情況。
方法一：為父元素設定上邊框，並將父元素高度減少
.father
.father
.father
同級相鄰元素之間的外邊距會塌陷，塌陷後的間距等於兩個元素外邊距的較大值（如果後者被清除浮動，不遵循此規則）
class
="module"
>
class
='div1'
>
div>
class
='div2'
>
div>
div>
*.module
.div1
.div2
上下相距 20px：
class
="module"
>
class
='div1'
>
div>
class
='div2'
>
div>
class
='div3'
>
div>
div>
*.module
.div1
.div2
.div3
上下邊距為 20 px ：
上下邊距 35 px：
解決外邊距合併的方法有哪些？
外邊距合併問題 1.父子級 1.給父元素新增邊框屬性 2.給父元素 子元素新增浮動屬性 3.給父元素 子元素新增position absolute屬性 4.給父級元素設定overflow hidden屬性 5.給父子級新增display inline block屬性 6.將本應該設定給子元素的外邊距...
防止因外邊距疊加造成的外邊距塌陷的方法總結
1.什麼是外邊距疊加 當兩個或更多垂直外邊距相遇時，它們將形成乙個外邊距。這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。並且要知道 只有普通文件流中塊框的垂直外邊距才會發生外邊距疊加。行內框 浮動框或者絕對定位框之間的外邊距不會疊加。2.為什麼會發生 根據盒模型規範，乙個盒子如果沒有上內...
外邊距塌陷問題的解決辦法
會導致外邊距塌陷的兩種情況 情況一 兩個兄弟盒子，上面的盒子設定了margin bottom,下面的盒子設定了margin top,實際中會取值較大的那個屬性值顯示在網頁中。這種情況一般較為少見。這兩個屬性只設定乙個即可解決。情況二 巢狀盒子 父元素與子元素 間的外邊距塌陷 發生在垂直方向上的外邊距...