怎么消除margin重叠，BFC触发，BFC是什么？

最新推荐文章于 2022-10-29 15:47:54 发布
最新推荐文章于 2022-10-29 15:47:54 发布
阅读量424 收藏
点赞数
分类专栏： JS 前端 HTML 文章标签： html css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44100002/article/details/117252170
版权
前端 同时被 3 个专栏收录
20 篇文章 0 订阅
订阅专栏
JS
16 篇文章 0 订阅
订阅专栏
HTML
11 篇文章 0 订阅
订阅专栏

目录

margin重叠现象

两个或多个块级盒子的垂直相邻边界会重合。

margin值计算方法：

a、全部都为正值，取最大者；
b、不全是正值，最大正值+最小负值；
c、没有正值，零+最小负值。

消除margin重叠：

1.在重叠的margin之间插入border,padding;
2.使用BFC是页面上独立容器的特性触发BFC。

BFC布局规则

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

如何触发BFC

1.根元素（<html>）
2.浮动元素（元素的float 不是none）
3.绝对定位元素（元素的 position为absolute 或fixed）
4.display 为inline-block、table-cell、table-caption，table，table-row、table-row-group.table-header-group、table-footer-group、inline-table、flow-root、flex 或inline-flex、grid 或inline-grid
5.overflow 值不为visible的块元素
6.contain值为layout、content 或 paint的元素
7.多列容器（元素的column-count 或 column-width 不为auto，包括 column-count为1）
在这里插入图片描述
参考文章：BFC(块级格式化上下文)
参考视频：带你用最简单的方式理解最全面的BFC

Ｓòrry╮
关注
专栏目录
前端CSS必知：BFC及其触发条件
清颖的博客
08-08 6780
文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。 将本人好久之前的 云笔记 搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文） 可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到； 文本类属性的元素（inline)，文本元素和产生了bfc的元
什么是BFC，哪些元素会产生BFC
c_l_a_n_n_d的博客
07-27 980
根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflowhidden;每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...
关于BFC的特性，以及如何利用BFC解决margin溢出与margin重叠问题
u012925833的博客
05-22 1915
1. 何为BFC? 文章：https://juejin.im/post/5909db2fda2f60005d2093db#heading-8 BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与...
BFC（块级格式化上下文，防止 margin 重叠，用于清楚浮动）
weixin_52183381的博客
12-07 161
简单来说bfc就是块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。 BFC 区域不会与 float box 重叠 BFC 是页面上的一个独立容器，子元素不会影响到外面 计算 BFC 的高度时，浮动元素也会参与计算 那些元素会生成 BFC： 根元素 float 不为 none 的元素 position 为 fixed 和 absolute 的元素 display 为 table-cell、 table-caption， inline-block、 flex， inline-flex 的元素 ov
BFC解决处于同一个BFC的两个相邻Box的margin发生重叠问题
line233的博客
05-04 1115
BFC(块级格式化上下文)，创建一个BFC相当于新建一个容器，在容器内部的元素布局不会影响到外部的布局，所以当两个处于同一BFC的box在垂直方向上发生重叠时，可以在其中一个box的外面包裹一个容器，并使用其触发一个BFC，这样两者就处于不同的BFC中，也就不会相互影响了。 /*css部分*/ .parent { background: pink; ...
盒子margin触发BFC的解决办法&CSS水平居中垂直居中的方式
egg_er的博客
10-22 143
相邻垂直块元素设置margin时会遇到合并的问题： 这个有点儿像大哥和小弟的关系，谁手段高，谁是大哥，也就听谁的； 如图：（原始图）：让上盒子和下盒子挨着； 此时给粉盒子不想和下面的绿盒子挨着，于是设置一个向下个外边距为50pxmargin-bottom: 50px;;当绿盒子知道以后，也不想挨着粉盒子了，于是他设置了一个向上的外边距为100pxmargin-top: 100px;；那么此时他们之间的距离是150px么？ 如图： 为什么不是150px呢？因为盒子在垂直方向设置margin会造成边距合并，
bfc与margin折叠问题
我是新手F1的专栏
04-17 677
边距折叠 边距折叠只会发生在上下边距，左右边距是不会发生折叠的 边距折叠只发生邻接的上下边距中，也即兄弟节点或者父子节点 发生边距折叠的两个节点必须同处于一个bfc布局中 发生边距折叠的两个父子节点没有border或者padding隔开 只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框- 或绝对定位之间的外边距不会合并。 bfcbfc的作用: 两列布局 通过使父元素bfc化，清楚内
BFC是什么？如何触发BFC？（实现两栏/三栏布局）
weixin_56180673的博客
10-29 1385
BFC是什么？如何触发？两栏/三栏布局如何实现？
前端面试——什么是BFC？
xt_123456的博客
05-09 2654
BFC是块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 具有 BFC 特性的元素可以看作是一个被隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。可以把BFC看作是一个独立的容器，容器里的元素无论怎么动，都不会影响到容器外部的布局。 只要元素满足以下任意一个条件就可以触发 BFC 特性： 1）设置浮动元素float值（除none以外的值） 2）绝对定位元素（position为absolute或fixed） 3）displ
理解BFC——Margin重叠
sinat_41871344的博客
08-27 1745
什么是BFC BFC（Block Formatting Context）直译为“块级格式化范围 ”。 w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 在BFC...
BFC（边距重叠解决方案）
m0_59070120的博客
09-14 418
（3）每个元素的margin Box的左边， 与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内）（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，里面元素的布局不会影响到外部元素。（5）BFC 的区域不会与float Box重叠（清浮动）;
css 去除标签中最后一个子元素的margin（3种方式）
陈先生的博客
06-07 6024
最近遇到的在布局的时候，最后一个margin不想要，虽然很简单，但还是想总结一下。 先上公用代码： css * { padding: 0px; margin: 0px; box-sizing: border-box; } body { width: 1200px; margin: 0px auto; }
BFC的理解和margin重叠的理解
进步的记录
08-07 684
在理解BFC之前，先了解一个margin重叠（合并） margin重叠（合并）： 块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单 个外边距，这样的现象称为“margin 合并”。 发生重叠前提条件： 1、普通文档流中的块级元素（不包括行内、浮动、绝对定位元素） 2、只发生在垂直方向 //css部分 *{ margin:0; ...
CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
Just Code
08-01 520
BFC的理解与应用 首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。   什么是BFC（Block formatting contexts） w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks...
几种CSS单位
yuyubushiyu的博客
08-29 275
px px(pixel)像素，px即为图片大小的最小单位，一张图片由许多像素构成，例如我们常说屏幕分辨率为1600x1200，代表水平方向有1600个像素点，垂直方向有1200个像素点。 em em的参考物是父级元素的font-size，若是自身定义了字体大小，则参考物为自身浏览器默认字体是16px）。 rem 参考物是根元素（html）的font-size。 % 一般是相对于父元素，但是并不十分准确 1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已.
HTML+CSS要点5：清除浮动与BFC
斜光的博客
02-04 169
浮动 文档流 页面上的元素按照：从上到下从左到右排列 一个元素在页面中的位置，取决于他在代码中的位置 从大到小，从左到右，从外到里 先排成一行，一行不够再换行 浮动会破坏文档流 根据指定的方向发生位移，碰到父级的边界或者相邻元素后停止 清除浮动 <br clear="both">效果好，但是只能在块元素中起作用，而且会多一行代码产生空白 伪元素:after主流方法 .fix...
html清除浮动的那一块区域,CSS中的BFC，外边距折叠，清除浮动
weixin_28744423的博客
06-19 113
BFC是什么？BFC(Block Formatting Context)直译为“块级格式化范围 ”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。BFC ...
什么是BFC，如何清除浮动？
Banality_human_workers的博客
08-28 391
BFC（Block Formatting Context）块级格式化上下文，是一个独立的布局环境。有自己独立的渲染区域。且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC布局的特点就是 将自己与外部隔离开。内部的布局不会受外部影响，外面的也不会影响内部的布局。 BFC的应用场景有哪些？ 当相邻div发生marign重叠时，BFC可以阻止这种情况。 可以把相邻的div放到不同的BFC中、BFC不会重叠浮动元素 如何创建一个BFC？ overflow
如何消除margin-top对父元素的影响
Efficiency9的博客
05-23 1567
有时我们会在css中遇到这种情况： 当我们给子元素设置了margin-top值之后，不仅子元素没有发生变化，父元素却发生了变化（外边距合并） 解决方案一： 给子元素加上float：left 解决方案二： 为父元素添加border属性(值不能为0) 解决方案三： 为父元素添加padding（值不能为0）
css中的BFC是什么
最新发布
06-06
- 防止 margin 重叠：在 BFC 中，相邻元素的 margin 会被分开，不会发生重叠的现象。 - 控制元素的布局：在 BFC 中，元素的布局是相对独立的，不会受到外部元素的影响，从而可以控制元素的位置和尺寸。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值