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;

    }