BFC（块格式上下文）

最新推荐文章于 2024-07-08 16:02:09 发布

eynoZzzzc

最新推荐文章于 2024-07-08 16:02:09 发布

阅读量207

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_44185558/article/details/125806497

版权

HTML+CSS+JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细介绍了视觉格式化模型，包括块盒、行内盒和匿名盒的概念。重点解析了块格式化上下文(BFC)的特性，如防止重叠、包含浮动元素以及margin折叠。BFC的触发条件和作用，如隔离元素的影响，以及在布局中的应用。文章还探讨了浮动和绝对定位在文档流中的表现，帮助理解CSS定位机制。

摘要由CSDN通过智能技术生成

视觉格式化模型

视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，定义了盒（Box）的生成，盒主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。

块盒（block）

当元素的CSS属性display为block，list-item或 table时，它是块级元素 block-level；
视觉上呈现为块，竖直排列；
每个块级元素至少生成一个块级盒，称为主要块级盒(principal block-level box)。一些元素，比如<li>，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。

行内盒（inline）

当元素的CSS属性display的计算值为inline，inline-block或inline-table时，称它为行内级元素；
视觉上它将内容与其它行内级元素排列为多行，典型的如段落内容，文本(可以有多种格式)，或图片，都是行内级元素；

匿名盒（anonymous）

匿名盒分匿名块盒与匿名行内盒，因为匿名盒没有名字，不能利用选择器来选择它们，所以它们的所有属性都为inherit或初始默认值；

定位方案

在定位的时候，浏览器就会根据元素的盒类型和上下文对这些元素进行定位，可以说盒就是定位的基本单位。

常规流

在常规流中，盒一个接着一个排列
在块级格式化上下文里面，它们竖着排列
在行内格式化上下文里面，它们横着排列
当position为static或relative，并且float为none时会触发常规流
对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置
对于相对定位(relative positioning)，position: relative，盒偏移位置由这些属性定义top，bottom，leftandright。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置

浮动

它位于当前行的开头或末尾
这导致常规流环绕在它的周边，除非设置 clear 属性

绝对定位

绝对定位方案中，盒从常规流中被移除，不影响常规流的布局
它的定位相对于它的包含块，相关CSS属性：top，bottom，left及right
如果元素的属性position为absolute或fixed，它是绝对定位元素
对于position: absolute，元素定位将相对于最近的一个relative、fixed或absolute的父元素，如果没有则相对于body

BFC(Block Formatting Context，块格式化上下文)，是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。它是一个封闭的黑盒子，里面元素的布局不会影响外部，反之亦然。

特点：

BFC的块不会和浮动块重叠
计算BFC元素的高度时，会包括浮动元素
在同一个BFC下的块 margin 会发生重叠（margin collapse），不在同一个则不会

触发条件：

浮动：float 的值不为 none
overflow 的值为 auto, scroll和 hidden
display 的值为 table-cell, table-caption和 inline-block
position 设置为 absolute和 fixed
弹性盒子（display:flex或者display:inline-flex）

除此之外， html 元素本身默认就是一个 BFC 元素。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

这意味着：一个BFC包含创建该上下文元素的所有子元素，但不包括新创建的BFC的子元素的内部元素

<div id='div_1' class='BFC'>
    <div id='div_2'>
        <div id='div_3'></div>
        <div id='div_4'></div>
    </div>
    <div id='div_5' class='BFC'>
        <div id='div_6'></div>
        <div id='div_7'></div>
    </div>
</div>