在开始讲解margin边距重叠问题之前,先要理解两个概念。这些不是必须掌握的概念,但是如果能掌握则能更好的理解css中的各种布局问题。

CSS包含块(Containing Block)

包含块可以理解为一个矩形,这个矩形的作用是为他包含的元素提供一个参考,元素的百分比尺寸,定位等等都是按照这个矩形来参考。

包含块的定义与原理

  1. 浏览器作为初始的包含块。
  2. 非static与relative元素,包含块为最近的块级父元素
  3. 如果元素fixed属性,则包含块为浏览器
  4. 如果元素为absolute属性,则包含块为父级元素中具有position属性的元素。

BFC块级格式化上下文

那首先我们就来看一下FC的概念。

 Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。

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

BFC的生成

CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC:

  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute或fixed

BFC的约束规则

  • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
  • 生成BFC元素的子元素中,每一个子元素做外边距与包含块的左边界相接触,(对于从右到左的格式化,右外边距接触右边界),即使浮动元素也是如此(尽管子元素的内容区域会由于浮动而压缩),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。

分解:

  1. 内部的Box会在垂直方向上一个接一个的放置
  2. 属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关。不同的BFC不会发生重叠。
  3. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
  4. BFC的区域不会与float的元素区域重叠。(这个解释了overflow与float结合使用进行自适应布局)
  5. 计算BFC的高度时,浮动子元素也参与计算(这个也就可以解释:为什么overflow可以清楚浮动了。)
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

在实际操作中,我们不需要关心BFC的具体结构,这要看浏览器的具体实现采用什么样的数据结构。对于BFC我们只需要知道使用一定的CSS声明可以生成BFC,浏览器对生成的BFC有一系列的渲染规则,利用这些渲染规则可以达到一定的布局效果,为了达到特定的布局效果我们让元素生成BFC。