当两个或多个相邻的垂直边距接触时，边距有时会发生重叠，并且不会用填充或边框分隔。如果子元素的边缘扩展到父元素的边缘，并且不会被填充分隔开，那么就会出现边距重叠的现象。...如果元素采用的是绝对定位、浮动定位或者有一个不一样的 格式化上下文时，边距不会发生重叠现象，以及在其他一些不太可能的情况下。 如果你感到困惑，没关系。边距不会发生重叠的规则是复杂的。...理解我们如何通过CSS属性操作 定位方案和格式化上下文是一个很好的开始。如果你能掌握这一模式的不同部分之间的相互作用，你就会比大多数人做得更好。至少你应该知道它们是存在的。...格式化上下文 格式化上下文是关于布局的。 它们是管理容器内元素布局的规则，以及它们如何相互交互。...您可能熟悉浮动和绝对定位布局的方式，因为我们在编写CSS时更直接与这些交互进行交互。 当一个元素未浮动或绝对定位布局时，正常文档流布局只是默认定位方案的名称。
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。...两个p之间的距离为100px，发送了margin重叠。 根据BFC布局规则第二条： Box垂直方向的距离由margin决定。...属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。...因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
width/height 取得最终渲染后的宽高，还可以取得相对于视窗的上下左右的距离 # 边距重叠 两个垂直外边距相遇时，会发生折叠，合并后的外边距高度等于两折叠外边距中最高的那个。...只有普通文档流中的垂直外边距才会发生折叠，行内元素、浮动元素或绝对定位之间的外边距不会发生折叠。...# 使用 BFC 解决边距重叠问题 块格式化上下文（Block Formatting Context，BFC） (opens new window) 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域...BFC 决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC 提供了一个环境，HTML 元素在这个环境中按照一定的规则进行布局。...# BFC 渲染规则 BFC 元素垂直方向的边距会发生重叠，属于不同 BFC 外边距不会发生重叠 BFC 的区域不会与浮动元素的布局重叠 BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 一、BFC是什么？...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...两个p之间的距离为100px，发送了margin重叠。 根据BFC布局规则第二条： Box垂直方向的距离由margin决定。...属于同一个BFC的两个相邻Box的margin会发生重叠 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。...因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
绝对定位 (absolute positioning) 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 那么 BFC 是什么呢？...通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。...div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。...首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
一、相对定位 position: relative 相对默认的布局位置进行定位，也就是相对自己应该在的位置来定位。...绝对定位元素也看不见绝对定位元素。所以下图2个box2发生了重叠 ? 绝对定位的定位对象是从它的父元素找是否有relative/fix/absolute。...也就是说拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。...如下去掉div3的z-index，div3的子元素div4和div6都直接和div3同级的div1/div2相互叠层。demo ?...（3）、父子关系的z-index 如何设置，不影响它和 box 的堆叠顺序。但我发现如果不设置父元素的z-index，然后再把子元素的z-index值设置为负数。父元素就会直接覆盖子元素。
如何去计算元素的宽（高）？...IE9以上支持，除此外还可以取到相对于视窗的上下左右的距离。 根据盒模型解释边距重叠 当两个外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。...注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。...我是这样理解的：它指定了一块环境，在这块环境内部的元素布局与外界不产生相互影响 以BFC为例，来介绍一下它的渲染规则： 内部盒子垂直排列，间距由margin决定 在同一BFC下，相邻两个盒子会发生边距重叠现象...计算BFC高度的时候，浮动元素也会参与计算 BFC的区域不会与浮动的区域重叠 介绍完规则再来介绍一下如何创建BFC： overflow不为visible; float的值不为none； position
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 只有绝对定位absolute和浮动float才会脱离文档流。 ...问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。 （1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。... DIV 相互重叠 *{margin:0;padding:0;}...另外要注意：仅使用margin属性布局绝对定位元素的情况 此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。
绝对定位 (absolute positioning) 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。...属于同一个BFC两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素 margin重叠,仅仅是垂直方向，左右不是这个样子的），会发生外边距合并，指的是当两个垂直外边距相遇时，它们将形成一个外边距...外边距折叠（外边距合并）的计算方式 1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。...BFC的布局规则如下： 1、内部的盒子会在垂直方向，一个个地放置； 2、 BFC是页面上的一个隔离的独立容器； 3、属于同一个BFC的两个相邻Box的上下margin会发生重叠 ； 4、 计算BFC的高度时...，浮动元素也参与计算； 5、每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 6、 BFC的区域不会与float重叠； 那么如何触发 BFC呢？...1、两个相邻的普通流中的块元素垂直方向上的 margin会折叠 ? 效果图是： ?...根据BFC规则的第3条： 盒子垂直方向的距离由margin决定，属于同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。
FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。...MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。...绝对定位(Absolute positioning) 绝对定位方案，盒从常规流中被移除，不影响常规流的布局； 它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；...比如下面栗子的特殊情况 使用BFC阻止多列布局最后一列换行 5.4 阻止相邻元素的margin合并 属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl...所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。
绝对定位 在绝对定位布局中，元素会整体脱离普通流（浮动布局可以理解成脱离父元素文本流），因此绝对定位不会对其兄弟元素造成影响，而具体的位置由绝对定位的坐标决定。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...简单来说，可以把BFC理解成一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部的元素。...BFC的一些应用 实现自适应的两栏布局 应用了第四点BFC的区域不会与float box重叠的特性。一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了文字环绕及类似情形。...BFC的特性三：属于同一个BFC的两个相邻的box的margin会发生叠加，结果值并集。
，有一套渲染规则，它决定了其子元素如何定位，以及其他元素的关系和相互作用。...垂直方向上，自上而下排列，和文档流的排列方式一致 2. 在 BFC 中上下两个相邻的两个容器的 margin 会重叠 3. 计算 BFC 的高度时，需要计算浮动元素的高度 4....解决 margin 重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。 2....创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。 9. 如何设置小于 12px 的字体？...三栏布局的实现 • 左右两遍固定。中间自适应 • 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的 margin 的值。
指定元素使用正常的布局行为，即元素在文档常规流中当 前的布局位置。 absolute: 表示元素为绝对定位。...元素先放置在未添加定位时的位置，再在不改变页面布局的前提 下调整元素位置。...简单来说定位就是规定被定位元素距离页面顶部及左边的距离 绝对定位 开启后脱离文档流 不设置位置的偏移量则位置不会变化 偏移量 正值（top）向下 负值（top）向上 绝对定位的集中情况 如果当前元素的父级元素是...当元素之间重叠的时候，z-order决定哪一个 元素覆盖在其余元素的上方显示。通常 来说z -index属性值较大的元素会覆盖较小的一个。...尽管CSS样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠则定义了它们如何相互作用。
本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面： 1.什么是BFC 2.如何生成BFC 3.BFC的布局规则 4.应用 1.什么是BFC 首先看下什么是Formatting Context...： (1)CSS2.1规范中的一个概念 (2)它是指页面中的一块渲染区域，并拥有一套渲染规则，它决定了其子元素将如何定位，以及与其他元素的关系和相互作用。...(3)CSS2.1 中只有BFC和IFC，CSS3中还增加了GFC和FFC BFC： 块级格式化上下文，它是一个独立的渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，并且与这个区域外部无关。...属于同一个BFC的两个相邻的Box的margin会发生重叠； 可应用到解决margin重叠的问题中： 可在其中一个元素外包裹一层容器，并触发该容器生成BFC（overflow:hidden;），这样两个元素就不属于同一个...解决方法上面已经介绍过：可在其中一个元素外包裹一层容器，并触发该容器生成BFC（overflow:hidden;），这样两个元素就不属于同一个BFC了，就不会发生margin重叠的问题了。
margin看起来是一个相当简单的事情，但是，在本文中，咱们将看一些在使用margin一些让人迷惑有有趣的事情。 特别是，margin之间如何相互作用，以及 margin 重叠效果。...CSS 盒模型 CSS 盒模型指的是一个盒子的各个部分——content、padding、border和margin,它们各自之前是如何布局及相互作用的， 如下所示： image.png 盒子的的四个margin...那么它的顶部和底部 margin 可能会相互重叠。...值得注意的，margin 只在块的方向上重叠，比如段落之间。 阻止 margin 重叠 如果一个元素是绝对的定位，或者是浮动的，那么它的margin永远不会重叠。...当我们使用元素来布局设计时，它的重叠行为就没有多大的意义了。
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。...margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC 的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
margin看起来是一个相当简单的事情，但是，在本文中，咱们将看一些在使用margin一些让人迷惑有有趣的事情。 特别是，margin之间如何相互作用，以及 margin 重叠效果。...CSS 盒模型 CSS 盒模型指的是一个盒子的各个部分——content、padding、border和margin,它们各自之前是如何布局及相互作用的， 如下所示： image.png 盒子的的四个...那么它的顶部和底部 margin 可能会相互重叠。...值得注意的，margin 只在块的方向上重叠，比如段落之间。 阻止 margin 重叠 如果一个元素是绝对的定位，或者是浮动的，那么它的margin永远不会重叠。...当我们使用元素来布局设计时，它的重叠行为就没有多大的意义了。
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。...属于同一个BFC的两个相邻Box的margin会发生重叠 3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。...属于同一个BFC的两个相邻Box的margin会发生重叠 注意：发生重叠后，外边距的高度等于两个发生重叠的外边距的高度中的较大者 从上面的例子可以看出，虽然红色 和 蓝色 的 div 都有设置...依据BFC布局规则第四条： BFC的区域不会与float box重叠。
MDN文档里的原话确实不怎么像人话，能看懂就奇了怪了。 简而言之,BFC就是一个独立的布局环境，可以认为是一个容器，在这个容器里面你随便放都不会影响到容器外的布局。...BFC在三种布局方式(正常布局流,浮动,绝对定位)中属于正常布局流 如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素...Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。...BFC作用 1.解决margin的重叠问题 由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC就解决了margin重叠问题 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
