BFC及其作用

最新推荐文章于 2024-07-23 14:07:14 发布
最新推荐文章于 2024-07-23 14:07:14 发布
阅读量242 收藏
点赞数
分类专栏： HTML+CSS 文章标签： margin-left塌陷 css 浮动特性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42842786/article/details/100547462
版权

文章目录

1. 什么是margin塌陷？

举个例子，像下面这种情况，上下两个盒子的间距按说是20px和40px，但实际都是20px，这就是塌陷。

      <div style="background-color:tomato;width:100px;height:100px;margin-bottom:20px;"> hello world</div>
      <div style="background-color:#bbb;width:100px;height:100px;margin-top:0px;"> hello world</div>
      <hr>
      <div style="background-color:tomato;width:100px;height:100px;margin-bottom:20px;"> hello world</div>
      <div style="background-color:#bbb;width:100px;height:100px;margin-top:20px;"> hello world</div>

其实这是CSS1.0故意设计的，因为这样符合平面设计师的要求。

2. 为什么塌陷时只出现在垂直方向？

在CSS出现之前使用的p标签，它要求每个段落之间有相同的间隔，所以当你对p标签设置了margin-top和margin-bottom你发现就会出现塌陷的情况，而且会取二者之中的最大值。

明白塌陷产生的条件也就明白了如何解决塌陷所带来的问题，那么塌陷产生的条件是什么？

首先是一个大前提：元素之间没有被非空内容、padding、border 或 clear 分隔开。然后有符合下面几种毗邻情况：

top margin of a box and top margin of its first in-flow child
(一个元素的 margin-top 和它的第一个子元素的 margin-top)

bottom margin of box and top margin of its next in-flow following sibling
(普通流中一个元素的 margtin-bottom 和它的紧邻的兄弟元素的的 margin-top)

bottom margin of a last in-flow child and bottom margin of its parent if the parent has ‘auto’ computed height
(一个元素（ height 为 auto ）的 margin-bottom 和它的最后一个子元素的margin-bottom)

top and bottom margins of a box that does not establish a new block formatting context and that has zero computed ‘min-height’, zero or ‘auto’ computed ‘height’, and no in-flow children
(一个没有创建 BFC、没有子元素、height 为0的元素自身的 margin-top 和 margin-bottom)

这段英文为摘抄

W3C规范这样描述：

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
在BFC中，每个盒子的左外边框紧挨着包含块的左边框（若是从右到左的格式，则为紧挨右边框）。即使存在浮动也是这样的（尽管一个盒子的边框会由于浮动而收缩），除非这个盒子的内部创建了一个新的BFC浮动，盒子本身将会变得更窄）。

3. 如何解决margin塌陷？

方法已在代码中给出

    <div class="wrapper">
        <div class="content">
        </div>
    </div>

    * {
        margin: 0;
        padding: 0;
    }

    .wrapper {
        background-color: #000;
        margin-left: 100px;
        margin-top: 100px;
        width: 200px;
        height: 200px;
        /* float: left; */
        /* position: absolute; */
        /* display: inline-block; */
        /* display: flex; */
        /* 注意使用 overflow 溢出的部分会自动隐藏起来*/
        /* overflow: hidden; */
        /* 注意使用display: table虽然可以解决塌陷，但是cotainer的高度会失效 */
        /* display: table; */
        /* overflow: scroll; */
        /* overflow: scroll 溢出的部分会变成滚动，效果奇葩，应该没什么用 */
    }

    .content {
        /* 设置 margin-top: 150px;我们发现子级盒子会带着父级盒子一起往下移动，好像二者粘连到了一起或者说子级盒子好像没有了“顶”，此时会取wrapper和content的一个margin-top最大值。这种现象叫做margin塌陷，是经典BUG。 */
        margin-top: 150px;


        /* 在子元素中使用以下这些也可以解决塌陷 */
        /* float: left; */
        /* position: absolute; */
        /* display: inline-block; */
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-left: 50px;
    }

4. margin合并(也叫margin折叠)

外边距折叠的例子如下

			<div class="wrapper"></div>
         <div class="content"></div>

.wrapper{
    height: 20px;
    background-color: #000;
    margin-top: 20px;
    margin-bottom: 200px;
}
.content{
    height: 20px;
    margin-top: 100px;
    background-color: #0f0;
}

参考：

解决方法

这里要分情况讨论，父子元素或是兄弟元素

参考：

  1. 使用数学方法（不解决）
  2. 引入BFC；给元素添加父级盒子并为其父级元素添加属性overflow: hidden;
  3. BFC可能会导致外边距折叠，同时也可以使用BFC来解决外边距折叠

这一开始听起来可能有些困惑，因为我们在前面讨论了BFC导致外边距折叠的问题。但我们必须牢记在心的是毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生。如果他们属于不同的BFC，他们之间的外边距将不会折叠。所以通过创建一个新的BFC我们可以防止外边距折叠。
如下，之后给父级元素添加overflow: hidden;即可解决margin合并

      <div class="container">
         <div class="content1"></div>
         <div class="content2"></div>
      </div>
      <div class="container">
         <div class="content3"></div>
      </div>

效果如下

上面一段话的原文链接: https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html © w3cplus.com

5. 浮动元素(使用BFC来包含浮动)

浮动元素带有float的元素，最早用来实现类似于报纸图片环绕的布局

      <div class="wrapper">
         <div class="content">1</div>
         <div class="content">2</div>
         <div class="content">3</div>
         <div class="content">4</div>
         <div class="content">5</div>
         <div class="content">6</div>
         <div class="content">7</div>
         <div class="content">8</div>
         <div class="content">9</div>
      </div>
      <br>
      <div class="context1">YAMA</div>
      <div class="context2">YAMA</div>

      * {
         margin: 0;
         padding: 0;
      }

      .wrapper {
         background-color: aqua;
         /* width: 330px; */
         border: 2px solid black;
         /* 解决方法如下，在父级盒子添加overflow: hidden; */
         overflow: hidden;
      }

      .content {
         float: left;
         /*使元素站队、浮动*/
         color: #fff;
         margin-left: 10px;
         margin-bottom: 10px;
         background-color: black;
         width: 100px;
         height: 100px;
      }

      .context1 {
         float: left;
         width: 100px;
         height: 100px;
         background-color: red;
         color: white;
         opacity: 0.7;
      }

      .context2 {
         width: 150px;
         height: 150px;
         background-color: yellow;
         color: blue;
         /* 解决方法如下，在后面的元素变为行内块 */
         /* display: inline-block; */
         /* float: left; */
         /* float: right; */
      }

效果如图

此处我们注意到后面两个div好像具有层模型的特点，实际上不是，正确理解为：
浮动元素产生了浮动流，块级元素看不到所有产生了浮动流的元素。

注： 产生了BFC的元素、文本类属性（带有inline属性）的元素以及浮动元素都能看到浮动元素
（这里所指的看不到指的是在进行定位时会无视它而进行覆盖，就像层模型一样绝对定位）

（还需注意，如果设置position和float后由内容决定大小，打内部把元素转换成inline-block）

应用实例

在这里插入图片描述

6. 附实例

      <div class="wrapper">
         <div class="content">1</div>
         <div class="content">2</div>
         <div class="content">3</div>
         <p>YAMA</p>
      </div>

      * {
         margin: 0;
         padding: 0;
      }

      .wrapper {
         border: 10px solid black;
         /* overflow: hidden; */
      }

      .content {
         float: left;
         color: #fff;
         margin: 2px;
         background-color: black;
         width: 100px;
         height: 100px;
      }

      p {
         background-color: cadetblue;
         /* clear: both; */
      }

下图中上面的图片设置了overflow: hidden;，下面的没有

  • p标签属于块级元素会忽视float，在进行定位假设之前的浮动元素不存在（但是注意这里和之前的层模型区分开来）
  • 下面的图中的下面那部分是p标签添加clear: both;之后，意义是不允许该标签附近出现浮动对象，（相应的值还有左右），相当于清除了div标签的浮动特性。

7. 使用BFC来防止文字环绕

有时候一个浮动div周围的文字环绕着它（如下图中的左图所示）但是在某些案例中这并不是可取的，我们想要的是外观跟下图中的右图一样的。为了解决这个问题，我们可能使用外边距，但是我们也可以使用一个BFC来解决。

      <div class="container">
      <div class="floated">
         <img width="150px" src="https://ythdong.gitee.io/blog_image/JavaScript/%E6%8D%95%E8%8E%B720.PNG">
      </div>
      <p>YAMA YAMA YAMA YAMAYAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMAYAMA YAMA.
         YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMAYAMA YAMA
         YAMA YAMA
         YAMA YAMA YAMA YAMAYAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMAYAMA YAMA.
         YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMA YAMAYAMA YAMA
         YAMA YAMA.</p>
     </div>

    .floated {
        float: left;
        margin: 5px;
    }

    p {
        color: rgb(14, 13, 13);
        text-align: center;
        /* 解决方法如下 */
        overflow: hidden;

        /* 以下两种亦可，但效果不好 */
        /* display: inline-block; */
        /* clear: both; */
    }

8. 在多列布局中使用BFC

如果我们正在创建的一个多列布局占满了整个容器的宽度，在某些浏览器中最后一列有时候将会被挤到下一行。会发生这样可能是因为浏览器舍入（取整）了列的宽度使得总和的宽度超过了容器的宽度。然而，如果我们在一个列的布局中建立了一个新的BFC，它将会在前一列填充完之后的后面占据所剩余的空间。

      <div class="container">
         <div class="column">column 1</div>
         <div class="column">column 2</div>
         <div class="column">column 3</div>
      </div>

      .column {
         /* 父元素或者说视窗宽度的31.33%，下面的百分号也是如此 */
         width: 31.33%;
         background-color: green;
         float: left;
         margin: 0 0%;
      }

      .column:last-child {
         float: none;
         overflow: hidden;
      }

现在即使容器的宽度会有轻微的变化，但是布局也不会中断。当然，这并不是多列布局的最好选择，但它是防止最后一列下滑问题的一种方法。Flexbox在这种情况下可能是一个更好的解决方案，但是这应该要说明一下在这些情况下元素是如何表现的。

9. 两栏布局

实现两栏布局

10. 如何创建BFC？

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

10.1. 总结

  1. 根元素(整个页面就是一个大的BFC)；
  2. float为 left | right；
  3. overflow为 hidden | auto | scroll；
  4. display为 inline-block | table-cell | table-caption | flex | inline-flex；
  5. position为 absolute | fixed；

请注意，BFC并不是一个css属性，也不是一段代码，而是css中基于box的一个布局对象，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。明确地，它是一个独立的盒子，并且这个独立的盒子内部布局不受外界影响，当然，BFC也不会影响到外面的元素

11. 参考

  1. 深度剖析Margin塌陷，BFC，Containing Block之间的关系
  2. 理解CSS中BFC
  3. css中的BFC
HuiDT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何解决margin塌陷以及margin合并
shi_1204的博客
05-05 1万+
什么是外边距合并，以及常见的几种情况 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。 发生合并的情况有以下几种： 两个元素是兄弟关系： .两个元素是父子关系（没有内边距或边框把外边距分割开）： 一个空元素，没...
【CSS】块格式化上下文（BFC）：解决margin坍塌、高度塌陷、自适应布局等问题
来都来了，不再学会儿？
10-17 292
这里写目录标题1、css 定位机制：2、 BFC解决什么问题：3、 怎么触发BFC：4、 BFC - margin重合：5、 BFC - margin塌陷：6、 BFC - 高度塌陷：7、 BFC - 自适应布局： 1、css 定位机制： css 中的定位机制可分为三种： 1. 普通的文档流：block 块级元素单独一行 (span)，inline内联元素排成一排（div）。 2. 定位流：position 相当于新开一个层级。 absolute：绝对定位。从文档流中脱出，相对于其最接近的一个最有定位设置的
CSS定位之BFC背后的神奇原理
办公研究所
07-24 151
BFC已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 什么是BFC 在解释 BFC 是什么之前，需要先介绍 Box Formatting Context的概念。BFC这个东西说常见的话你可能不觉得，但是你肯定会常用，也许你在用的时候也没想到BFC这东西。 css布局的基本单位 Box 是css布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 ...
淘宝顶部header的居中布局
u011280778的博客
06-29 1927
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
margin 负值 理论
zhuchunyan_aijia的博客
07-08 2572
当给一个元素设置margin 负值（top/left）,该元素将在该方向上产生位移 当给一个元素设置margin负值（bottom/right）,这个元素并不会像你所预想的产生位移，而是将任何紧随其后的元素“拉”过来，覆盖在自己的上边。
10分钟理解CSS BFC原理及其应用
09-27
理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 首先，我们来看看BFC的常见定位方案。在CSS布局中，有三种基本的定位方式： 1. **普通流（Normal Flow）**：这是元素默认的布局方式，元素按照它们...
bfc的详细介绍以及大总结
01-17
BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他元素的关系和相互作用。在理解BFC之前，我们需要先了解一些基本的概念： - **Block-...
前端大厂最新面试题-BFC.docx
06-06
在前端开发中，BFC（Block Formatting Context...在实际开发中，熟练掌握BFC的概念及其应用，能够帮助开发者解决许多布局问题，提高代码的可维护性和效率。因此，对于前端工程师来说，深入理解和运用BFC是非常必要的。
宝锋对讲机BF-C1驱动软件
04-19
驱动软件在该设备与电脑交互时起着至关重要的作用，尤其是在进行写频操作时。这里我们将深入探讨宝锋BF-C1对讲机驱动软件及其相关知识。 首先，驱动程序是计算机硬件与操作系统之间的一个桥梁，它允许操作系统识别...
display none的元素重新展示如何撑开页面_关于元素的浮动你了解多少
weixin_39980929的博客
11-29 196
首先，在介绍什么是浮动之前我们先介绍一下html中元素的普通流布局方式。在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。如果没有特殊样式指定，所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置决定的。什么是浮...
html/css-margin塌陷解决以及bfc触发
Fly_Fly_Zhang的博客
03-12 649
什么是margin塌陷：当两个盒子嵌套时，我们调整子盒子在父盒子中的位置，左右使用margin-left/margin-right 就可以变换左右位置，但是使用margin-top时，子盒子在父盒子中的相对位置并没有发生变化，并且当子盒子的值超过父盒子和网页顶端的距离时，子盒子会带着父盒子一起移动。 发生margin塌陷代码： html:下面所有实例html代码相同，所以只在此处展示： &lt;!...
margin溢出问题
清风的专栏
01-17 6859
转自：http://imatlas.com/posts/margin-overflow/ 子节点的margin溢出问题 六月11 我们知道，css margin是会合并的，有时会导致一些布局问题。 事实上margin还有存在一个溢出的问题： 当其父节点没设置宽高的时候，子节点的margin超出父节点而存在，会导致父节点的left/top产生了偏移，导致positio
css 基础捡漏（三） margin塌陷 margin合并 BFC 及相关解决办法
幼儿园老大的博客
09-23 268
看下面的例子，你会发现father距上方100px,而child并没有离父元素上方100px.这就是margin塌陷 而father和mather间距也不是150px,而是100px,这就是margin合并 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
margin塌陷、合并问题及BFC解决
consistent__的博客
01-31 397
margin塌陷 父子元素之间垂直方向的margin会粘合到一起，取最大的那个值 解决方法 优缺点 给父级设置边框或内边距 不专业，尽量不用 bfc块级格式化上下文 margin合并 两个兄弟元素之间垂直方向的margin发生合并为高度中的较大者 解决方法 优缺点 给它们添加一个父级然后给父级使用bfc 改变了结构 改变其中一个外边距的值，使之达到想要的效果 BFC (块级格式化上下文) 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素
bfc是什么_关于margin的两个经典bug，以及bfc简述
weixin_39955154的博客
11-27 155
margin两个经典bug:处理bug漏洞，只能弥补，不能完全解决。一、margin 塌陷问题：没加 margin 时，给wrapper的子元素加上margin-top之后，发现父元素也跟着子元素走，给wrapper加上margin-top之后，发现子元素的margin-top变成100px了，这就是margin塌陷问题，注意：垂直方向的margin-top，父子元素是结合到一起的，它俩会取最大的...
margin塌陷问题与合并问题
Sunshineanl的博客
04-25 3851
margin塌陷问题与合并问题margin塌陷问题和合并问题都只对垂直方向有效 margin塌陷问题这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。因为在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有“棚顶”一样，因此叫margin塌陷问题。mar
理解BFC——Margin重叠
sinat_41871344的博客
08-27 1705
什么是BFC BFC（Block Formatting Context）直译为“块级格式化范围 ”。 w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 在BFC...
margin塌陷现象及解决方法——BFC（面试常问）
1900's 88 keys的博客
10-14 865
目录margin塌陷现象同级的元素塌陷父级和子级的元素margin塌陷解决办法BFC(Block formatting context)演示代码解决同级的元素塌陷代码解决父级和子级的元素margin塌陷BFC相关拓展一下：容纳浮动元素阻止文本环绕 margin塌陷现象 当纵向相邻的两个或多个块元素，如果同时设置了外边距的时候，那么外边距会发生塌陷，也称之为边界折叠。如果两个相邻元素设置的外边距一样的时候，外边距将会完全重叠。如果两个相邻元素设置的外边距不一样的时候，那么浏览器将会以最大的那个外边距为准。官方
CSS学习笔记
最新发布
ngczx的博客
07-23 655
CSS学习笔记
浮动及其副作用？如何去除浮动的副作用
07-12
3. 使用overflow属性：给包含浮动元素的父元素设置overflow:hidden或overflow:auto属性，可以触发BFC（块级格式化上下文），从而清除浮动的影响。 以上是一些常用的方法，根据具体的情况选择合适的方式来解决浮动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值