BFC與margin重疊

在平時作項目的時候，有些時候會發生margin重疊的現象，但這種狀況並非一直都會發生，那到底何時會發生margin重疊呢。在網上搜索了一些資料，大體作了一些整理。

首先，會發生margin重疊的確定是同一個BFC內的塊級元素，例如div、ul等，不是塊級元素不會發生重疊。（內聯元素是不能設置高、行高、內外邊距的，並且內聯元素只能容納文本或者其餘內聯元素。）

重疊的狀況大體能夠分爲如下幾種：

一、當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。

二、當一個元素包含在另外一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），第一個子元素的上邊距會和父元素的上邊距合併；最後一個子元素的下邊距會和父元素的下邊距合併。

三、假設有一個空元素，它有外邊距，可是沒有邊框或填充。在這種狀況下，上外邊距與下外邊距就碰到了一塊兒，它們會發生合併。若是這個外邊距遇到另外一個元素的外邊距，它還會發生合併。

 

當發生重疊的時候：

一、當兩個margin都是正值的時候，取二者的最大值；

二、當 margin 都是負值的時候，取的是其中絕對值較大的，而後，從 0 位置，負向位移；

三、當有正有負的時候，先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加。

 

 

有時候咱們並不但願margin會合並，由於不指望的合併會給頁面佈局帶來混淆。前面說過，會發生合併的是同一個BFC內的塊級元素，也就是說屬於同一個BFC的兩個相鄰塊級元素的margin會發生重疊。那麼什麼是BFC，怎麼生成BFC。

 

如下內容大多摘自：http://www.cnblogs.com/dojo-lzz/p/3999013.html。

 BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

知足下列CSS聲明之一的元素便會生成BFC。

一、根元素

二、float的值不爲none

三、overflow的值不爲visible  （這一條不知道爲何對於上下元素的時候不起做用。）

四、display的值爲inline-block、table-cell、table-caption

五、position的值爲absolute或fixed

 

瀏覽器對於BFC這塊區域的約束規則以下：

一、內部的Box會在垂直方向上一個接一個的放置

二、垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關。）

三、每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素能夠超出他的包含塊邊界）

四、BFC的區域不會與float的元素區域重疊

五、計算BFC的高度時，浮動子元素也參與計算

六、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然

 

 

以上這些約束就能夠解釋css中的一些規則了。

 

Block元素會擴展到與父元素同寬，因此block元素會垂直排列

垂直方向上的兩個相鄰DIV的margin會重疊，而水平方向不會(此規則並不徹底正確)

浮動元素會盡可能接近往左上方（或右上方）

爲父元素設置overflow：hidden或浮動父元素，則會包含浮動元素（根本緣由在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題）

 

 

爲了防止發生margin重疊，只須要把發生重疊的兩個元素之一輩子成BFC就能夠了，這只是BFC其中一個做用。BFC在css佈局中有不少狀況可卡因起做用，例如:

一、對於上下相鄰的兩個元素，只要把其中一個設置爲display:inline-block。按理論來講，將其中一個設置爲overflow:hidden，也能夠達到消除重疊的效果，結果卻沒有，不知道爲何。

二、給父元素設置border或者padding，子元素的margin就不會與父元素重疊。例如margin-top。

給父元素設置    overflow: hidden或者display: inline-block或者float: left或者position: absolute，子元素的margin就不會與父元素重疊。

給子元素設置display: inline-block，子元素的margin就不會與父元素重疊。

三、當父元素沒有設置寬高，子元素浮動的時候，會使得父元素高度塌陷，這時候只須要給父元素設置overflow: hidden或者display: inline-block或者float: left或者position: absolute。均可以解決這個問題。根本緣由在於建立BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題

四、與浮動元素相鄰的已生成BFC的元素不能與浮動元素相互覆蓋。利用該特性能夠做爲多欄佈局的一種實現方式。overflow: hidden或者display: inline-block或者float: left或者position: absolute。

.left{

      background:pink;

      float: left;

      width:180px;

    }

.center{

      background:lightyellow;

      overflow:hidden;

      

    }

 .right{

      background: lightblue;

      width:180px;

      float:right;

    }