BFC是Block Formatting Context（块级格式化上下文）的缩写，是CSS中一个概念，用于描述页面上如何对元素进行布局。BFC是一个独立的容器，它内部的元素不会受到外部容器的影响，同时它也会影响其内部元素的表现。BFC有以下特点：内部元素不受影响：BFC内的元素会忽略外部容器的设置（比如外边距和内边距以及浮动等），只按照BFC的规则进行布局。外部容器受影响：BFC内的元素的布局会
原创
2024-08-13 08:53:18
79阅读
一、什么是BFC 具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素，以防止出现高度塌陷问题。 总之，BFC就是一种属性，这种属性会影
转载
2020-06-03 11:24:00
116阅读
2评论
BFC: 块级格式化上下文，它是页面中一块渲染区域，在这个渲染区域里面有一套渲染规则，规定了元素的布局方式以及如何和其它元素相互作用BFC的规则：1. 同一块BFC区域内的相邻元素外边距会发生重叠【margin重叠问题，分为相邻元素重叠和父子元素外边距塌陷问题】2. BFC区域内的元素不会与BFC区 ...
转载
2021-09-10 17:20:00
130阅读
2评论
Formatting context（FC） Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染
原创
2023-01-29 09:26:28
60阅读
特性：（1）形成BFC的元素，会在垂直方向叠加margin （说明不形成BFC的话，父子元素和同级元素都会在垂直方向重叠margin）（2）形成BFC的元素，不会与浮动元素重叠（3）形成BFC的元素，不会影响外面的布局；外面的布局也不会影响BFC内部布局（4）形成BFC的元素的高度会将浮动元素计算在内。形成BFC的条件（1）根标签（2）float不为none（...
原创
2020-02-19 19:59:38
107阅读
特性：（1）形成BFC的元素，会在垂直方向叠加margin （说明不形成BFC的话
原创
2020-02-19 19:59:38
47阅读
本文将带你深入了解 BFC 的原理、特性以及实际应用场景，帮助你更好地掌握 CSS 布局。
BFC 块级格式化上下文BFC来由理论来讲，包裹在父元素里的元素，不会影响父元素旁边的元素，但实际上并不总是如此，那有没有什么办法可以让里面的元素与外部真正隔离开来呢？可以试试BFC。BFC是什么BFC Block Formating Context 块级格式化上下文，是一个独立渲染区域，主要是隔离保护作用。也就是说BFC会形成一个完全独立的空间，让空间里的子元素不会影响到外面的布局，W3C官方解
转载
2021-01-21 10:11:39
193阅读
2评论
虽然知道块级格式化上下文是什么东西，但要我把这个东西给说清楚，还真的不是一件容易的事儿，所以这篇文章我就要说说清楚到底什么使传说中的BFC，即块级格式化上下文。 一、BFC的通俗理解 通俗的理解 布局的时候，BFC提供了一个环境，一些HTML元素在这个环境中按照一定规则进行布局，而这个BFC提供的环
转载
2017-03-13 00:56:00
89阅读
2评论
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些
转载
2021-08-09 14:29:00
161阅读
2评论
定位方案常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元t...
原创
2022-10-13 17:00:46
122阅读
格式化上下文布局FC（Formatting Context）格式化上下文—— 一个
原创
2022-07-12 16:35:46
175阅读
ble-cell、table-caption作⽤是什么？防⽌margin发⽣重叠
原创
2023-02-27 10:52:44
54阅读
理解前端中的 BFC（块级格式化上下文）
在前端开发的 CSS 布局领域中，BFC 是一个至关重要的概念，它对于元素的布局和排版起着关键作用，掌握 BFC 能让我们更精准地控制页面元素的呈现方式。
一、什么是 BFC
BFC（Block Formatting Context）即块级格式化上下文，它是 CSS 可视化布局中的一种独立渲染区域，拥有自己的一套布局规则，内部元素的布局不会影响到外部元素，
ServletContext javaee标准规定了，servlet容器需要在应用项目启动时，给应用项目初始化一个ServletContext作为公共环境容器存放公共信息。ServletContext中的信息都是由容器提供的。 举例：通过自定义ContextListener获取web.xml中配置的 ...
转载
2021-09-05 14:33:00
2026阅读
2评论
前言 在有些 css 相互影响作用下，对元素设置的 z-index 并不会按实际大小叠加，一直不明白其中的原理，最近特意查了一下相关资料，做一个小总结。 层叠上下文与层叠顺序 层叠上下文（stacking content）是 html 中的三维概念，也就是元素z轴。层叠顺序（stacking ord
转载
2020-10-02 13:56:00
155阅读
2评论
谈论进程上下文 、中断上下文 、 原子上下文之前，有必要讨论下两个概念： a -- 上下文 上下文是从英文context翻译过来，指的是一种环境。相对于进程而言，就是进程执行时的环境； 具体来说就是各个变量和数据，包括所有的寄存器变量、进程打开的文件、内存信息等。 b -- 原子 原子（atom）本
转载
2019-10-25 08:39:00
603阅读
2评论
在JavaScript中，你的代码将总是有着某种形式的上下文(代码在其内部工作的对象)。这也是其它面向对象语言所共有的功能，但它们都不如JavaScript处理得这样极端。上下文是通过变量this工作。变量this总是引用代码当前所在的那个对象。记住全局对象实际上是window对象的属性。这意味着即使是在全局上下文里，this 变量仍然引用一个对象。上下文可以成为一个强大的工具，是面向对象代码不可
转载
2024-01-26 22:35:50
89阅读
How can I include files from outside of Docker's build context using the "ADD" command in the Docker file? 如何使用Docker文件中的“ ADD”命令从Docker构建上下文之外包含文件？From the Docker documentation: 从Docker文档中：The path m
转载
2024-04-13 12:55:08
140阅读
什么是层叠上下文层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。 如果一个元素含有层叠上下文，(也就是说它是层叠...
原创
2022-10-13 16:53:13
91阅读
