一篇文章带拿下盒模型BFC渲染机制

头像
于梦中2010
    阅读 4 分钟
    2

    走在前端的大道上

    本篇将自己读过的相关 盒模型BFC 文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。

    一.常见定位方案

    在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

    • 普通流 (normal flow)

      在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

    • 浮动 (float)

      在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

    • 绝对定位 (absolute positioning)

      在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

    二、BFC 概念

    Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。常见的FC有BFC、IFC，还有GFC和FFC。

    那么 BFC 是什么呢？

    BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

    一个BFC的范围 包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。

    具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

    通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

    三、布局规则

    1. 内部的Box会在垂直方向上一个接一个的放置
    2. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
    3. 属于同一个BFC的 两个相邻Box的 上下margin会发生折叠；
    4. BFC的区域不会与float的元素区域重叠（阻止元素被浮动元素覆盖）
    5. 计算BFC的高度时，浮动子元素也参与计算（清除内部浮动）

    四、触发 BFC

    只要元素满足下面任一条件即可触发 BFC 特性：

    1. body 根元素
    2. 浮动元素：float 除 none 以外的值，如left、right
    3. 绝对定位元素：position (absolute、fixed)
    4. display 为 inline-block、table-cells、flex
    5. overflow 除了 visible 以外的值 ，如hidden、auto、scroll

    注意：有些文章中说HTML可以触发BFC，没有说body，按照上边介绍的一个BFC的范围和下边的案例1 来看，HTML能不能触发不确定，但是body是可以的

    五、BFC的特性及应用

    1.普通流中两个相邻的块元素 垂直方向上的 margin会折叠

    <style>
.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red;  
}  
</style>

<body>
   <div class="p"></div>  
   <div class="p"></div>  
</body>

    效果图是：

    clipboard.png

    发生外边距折叠，是因为他们 同属于 body这个根元素
    让 它们 不属于同一个BFC，就能避免外边距折叠：

    <style>
.wrap {  
  overflow:hidden;  
}
.p {  
  width:200px;  
  height:50px;  
  margin:50px 0;  
  background-color:red; 
}
</style>

<body>
    <div class="p"></div>  
    
    <div class="wrap">  
      <div class="p"></div>  
    </div> 
</body>

    效果图是：

    clipboard.png

    2.普通流中 父子嵌套关系的2个块元素 垂直方向上的 margin会折叠

        <style>
        .father {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
  
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>

    clipboard.png

    然后,我们给子元素添加一个margin-top: 50px时

    .son {
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 50px;
}

    我们神奇的发现父子元素同时"掉下来了50px",如图所示

    clipboard.png

    3.BFC可以包含浮动的元素（清除浮动）

    正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里：

    <style>
.wrap {  
  border: 1px solid #000; 
}
.inner {  
  float: left;
  width: 50px;
  height: 50px; 
  background: #eee;
}
</style>

<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

    外层的div会无法包含 内部浮动的div，效果见下图：

    clipboard.png

    但如果我们 触发外部容器的BFC，根据BFC规范 计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：

    <style>
.wrap {  
  border: 1px solid #000; 
  overflow:hidden;  
}
.inner {  
  float: left;
  width: 50px;
  height: 50px; 
  background: #eee;
}
</style>

<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

    就可以完成以下效果：

    clipboard.png

    4.实现2栏自适应布局

    要求左侧固定300px,右侧自适应的布局

     <style>
        .wrapper, * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 300px;
            height: 100px;
            background: red;
            float: left;
        }

        .right {
            height: 100px;
            background: skyblue;
            overflow: hidden;
        }

    </style>
    
    <div class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    clipboard.png

    原理：BFC元素不会和浮动的元素重叠

    参考文章：
    10 分钟理解 BFC 原理
    CSS中重要的BFC
    浅析CSS里的 BFC 和 IFC
    前端人人都应该理解的盒模型BFC渲染机制

    cssbfc盒模型
    于梦中2010
    2.1k 声望181 粉丝

    前端菜鸟儿，请多关照！

    « 上一篇
    一篇文章带你了解http/https
    下一篇 »
    前端常用代码片段(四)

    引用和评论

    推荐阅读
    头像
    vscode 推荐扩展

    于梦中2010赞 2阅读 4.4k评论 1

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新