BFC与margin重叠

Posted 2020-11-02 小新没蜡笔哦

在平时做项目的时候，有些时候会发生margin重叠的现象，但这种情况并不是一直都会发生，那到底什么时候会发生margin重叠呢。在网上搜索了一些资料，大致做了一些整理。

首先，会发生margin重叠的肯定是同一个BFC内的块级元素，例如div、ul等，不是块级元素不会发生重叠。（内联元素是不能设置高、行高、内外边距的，而且内联元素只能容纳文本或者其他内联元素。）

重叠的情况大致可以分为以下几种：

1、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

2、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），第一个子元素的上边距会和父元素的上边距合并；最后一个子元素的下边距会和父元素的下边距合并。

3、假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。如果这个外边距遇到另一个元素的外边距，它还会发生合并。

 

当发生重叠的时候：

1、当两个margin都是正值的时候，取两者的最大值；

2、当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；

3、当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

 

 

有时候我们并不希望margin会合并，因为不期望的合并会给页面布局带来混淆。前面说过，会发生合并的是同一个BFC内的块级元素，也就是说属于同一个BFC的两个相邻块级元素的margin会发生重叠。那么什么是BFC，怎么生成BFC。

 

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

 BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

满足下列CSS声明之一的元素便会生成BFC。

1、根元素

2、float的值不为none

3、overflow的值不为visible  （这一条不知道为什么对于上下元素的时候不起作用。）

4、display的值为inline-block、table-cell、table-caption

5、position的值为absolute或fixed

 

浏览器对于BFC这块区域的约束规则如下：

1、内部的Box会在垂直方向上一个接一个的放置

2、垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）

3、每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

4、BFC的区域不会与float的元素区域重叠

5、计算BFC的高度时，浮动子元素也参与计算

6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

 

 

以上这些约束就可以解释css中的一些规则了。

 

Block元素会扩展到与父元素同宽，所以block元素会垂直排列

垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)

浮动元素会尽量接近往左上方（或右上方）

为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素（根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题）

 

 

为了防止发生margin重叠，只需要把发生重叠的两个元素之一生成BFC就可以了，这只是BFC其中一个作用。BFC在css布局中有很多情况可卡因起作用，例如:

1、对于上下相邻的两个元素，只要把其中一个设置为display:inline-block。按理论来说，将其中一个设置为overflow:hidden，也可以达到消除重叠的效果，结果却没有，不知道为什么。

2、给父元素设置border或者padding，子元素的margin就不会与父元素重叠。例如margin-top。

给父元素设置    overflow: hidden或者display: inline-block或者float: left或者position: absolute，子元素的margin就不会与父元素重叠。

给子元素设置display: inline-block，子元素的margin就不会与父元素重叠。

3、当父元素没有设置宽高，子元素浮动的时候，会使得父元素高度塌陷，这时候只需要给父元素设置overflow: hidden或者display: inline-block或者float: left或者position: absolute。都可以解决这个问题。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题

4、与浮动元素相邻的已生成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;

    }