标签：高度 规则 很多 填充 浏览器 上下文 一起 table back
在平时做项目的时候，有些时候会发生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;
}
标签：高度 规则 很多 填充 浏览器 上下文 一起 table back
原文地址：https://www.cnblogs.com/zhaosijia----1234/p/8993209.html
