margin重叠也就是我们常说的CSS 外边距合并,W3C给出如下定义:

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

查看详情

margin折叠的产生有几个条件:

  • 这些margin都处于普通流中,并在同一个BFC中;
  • 这些margin没有被非空内容、padding、border 或 clear 分隔开;
  • 这些margin在垂直方向上是毗邻的,包括以下几种情况:
    1、一个box的top margin与第一个子box的top margin
    2、一个box的bottom margin与最后一个子box的bottom margin,但须在该box的height 为auto的情况下
    3、一个box的bottom margin与紧接着的下一个box的top margin
    4、一个box的top margin与其自身的bottom margin,但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box

垂直方向上毗邻的box不会发生折叠的情况:

  • 根元素的外边距不会参与折叠
  • 一个有clearance的box的上下margin毗邻,它会与紧接着的下一个box发生margin折叠,但折叠后的margin不会再与它们父box的bottom margin折叠

折叠边距的计算

当两个margin都是正值的时候,取两者的最大值;当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从 0
位置,负向位移;当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin
相加。但必须注意,所有毗邻的margin要一起参与运算,不能分步进行。

随便介绍下BFC

BFC是什么?

  在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。

  Box: CSS布局的基本单位

  Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:

  • block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
  • run-in box: css3 中才有, 这儿先不讲了。

  Formatting context

  Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

  CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

  BFC 定义

  BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

  BFC布局规则:

  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算

哪些元素会生成BFC?

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible

块格式化上下文BFC介绍:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

BFC详解:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

margin重叠的更多相关文章

  1. 上下margin重叠传递问题

    我发现强迫症真的是我一个大病...每次都非得把所有情况都实验出来不可...BUT!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部 ...

  2. CSS 外边距(margin)重叠及防止方法

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

  3. css margin重叠

    父子元素margin(垂直方向)重叠 解决办法: 给子元素添加浮动属性,相应父元素添加必要的清浮动属性: 给父元素添加边缘属性,如padding.border: 同级元素margin(垂直方向)反向重 ...

  4. 清浮动,防止上下margin重叠(浏览器顶部空白崩溃)

    清浮动 父级添加类别! .clearfix{zoom:1;//兼容ie6,7} .clearfix:after{ content:"."; display: "block ...

  5. CSS盒模型和margin重叠

    在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸.(div的实际占用尺寸变打了) 但: 一旦为页面设置 ...

  6. margin重叠现象

    1.上下/左右相邻的普通元素margin,不是两者相加之和,而是取最大值,这个现象叫做margin重叠. 2. 普通元素才会发生margin重叠,如果是float元素,就不会发生.margin是两者相 ...

  7. 解决margin重叠的问题

    margin重叠有两种情况: 1.兄弟级的垂直块之间,margin这个属性上下边距,会发生重叠的情况 解决办法:float浮动或display:inline-block 2 .父子级的块之间,子级的上 ...

  8. 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  9. margin重叠与穿透问题

    margin重叠是指两个同级元素之间.margin穿透指的是,子元素margin超出父元素而未被父元素包含的现象. 出现margin重叠的原因: 同一个BFC里面两个块级元素会出现margin折叠. ...

随机推荐

  1. 【运维监控】四款云服务监控工具介绍:Nagios 、 ganglia、zabbix、onealert

    在我们日常的工作中,有时候需要监控和管理平台的运行状况,而服务运行是否存在异常,是否有软硬件bug等,均需要第一时间知道.对服务状态了如指掌,是一个很重要的事情.那么这个如何做到呢,我们之前在进行私有 ...

  2. C#编写代码:求三个数中的最大数

    static void Main(string[] args)        {            float x, y, z, temp;            Console.Write(&q ...

  3. (18)IO流之字节缓冲路

    缓冲流 BufferedInputStream 缓冲输入流 前面的练习告诉我们使用缓冲数组读取的效率更高,为了方便的大家的操作,sun 位大家提供了一个缓冲输入字节流对象,让我们可以更高效率的读取文件 ...

  4. 第37篇 Asp.Net源码解析(二)--详解HttpApplication

    这篇文章花了点时间,差点成烂到电脑里面,写的过程中有好几次修改,最终的这个版本也不是很满意,东西说的不够细,还需要认真的去看下源码才能有所体会,先这样吧,后面有时间把细节慢慢的再修改.顺便对于开发的学 ...

  5. java学习笔记 --- 继承

    继承 (1)定义:把多个类中相同的成员给提取出来定义到一个独立的类中.然后让这多个类和该独立的类产生一个关系,    这多个类就具备了这些内容.这个关系叫继承.  (2)Java中如何表示继承呢?格式 ...

  6. Zabbix 2.2.x, 3.0.x SQL注射漏洞修复方法

    1.漏洞测试 在您的zabbix的地址后面加上如下url: jsrpc.php?type=&method=screen.get&timestamp=&pageFile=hist ...

  7. Swift应用案例 2.闭包入门到精通

      本文主要介绍Swift的闭包的使用并与OC的Block做比较.学习Swift是绕不过闭包的,因为无论是全局函数还是嵌套函数都是闭包的一种,本文主要介绍闭包表达式. 1.闭包表达式的使用 // 1. ...

  8. firefox无法使用yslow的解决方案

    首先,Yslow不支持firefox 36及以上版本. 解决方案:使用yslow的书签版本 使用方法:1.访问这里 http://yslow.org/mobile/ 2.把页面最后的那个 Deskto ...

  9. [Linux] PHP程序员玩转Linux系列-Nginx中的HTTPS

    1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 3.PHP程序员玩转Linux系列-搭建FTP代码开发环境 4.PHP程序员玩转L ...

  10. matlab函数:c2d离散化函数(待完善)

    Convert model from continuous to discrete time sysd =c2d(sys,Ts)sysd =c2d(sys,Ts,method)sysd =c2d(sy ...