MDN 对 BFC 的描述: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域.   往下接着看看: 下列方式会创建块格式化上下文: 根元素或包含根元素的元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 absolute 或 fixed) 行内块元素 (元素的 display 为 inline-block) 表格单…

初学CSS时,我们学到很多有意思的CSS规则,比如外边距塌陷,还有浮动元素的一些特性等,其实这些规则背后都是BFC这个东西在控制,下面我们来看下BFC到底是什么. 什么是BFC BFC(Block formatting contexts),翻译过来就是块级格式化上下文,指的是一种上下文环境,我们暂且不管它为什么叫这么晦涩冗长的名字,先看看哪些情况能形成BFC,然后看看它有哪些特性,这样我们也就知道它是什么了.就像我们学习js的对象一样,了解一个对象的原型,以及它的属性方法,我们也就知道它是什么了…

BFC是CSS中一个非常重要的概念,经常用来清除浮动以及处理外边距折叠,但BFC到底是个什么东西却很难准确的表达清楚,国内的相关技术文档基本都不全面,本文的目的就是对BFC的方方面面做个整理,当然未必会一次性整理到位,后面如果发现有遗留错误的会继续补充.   什么是BFC? BFC(Block formatting context)译为"块格式化上下文",是一个独立的渲染区域,规定了内部的子元素如何布局,并且与这个区域外部的关系.   什么情况下会产生BFC? a.根元素(注意:这里必…

BFC是什么呢? 掏粪男孩? 当然不是咯.BFC,英文名Block formatting context,直译为“块级格式化上下文”.它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进行定位,以及与其他元素的关系和相互作用.下表就是成为BFC元素后的特性以及如何成为BFC. BFC(参考W3C) 特性 进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,那么该元素就成为了一个隔离的独立容器,BFC的区域不会与外部浮动元素重叠,且在同一个BFC内的两个相邻块级元素的外边距会重…

BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式化模型. 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制,它也是CSS中的一个概念. 视觉格式化模型定义了盒(Box)的生成,盒主要包括了块盒.行内盒.匿名盒(没有名字不能被选择器选中的盒)以及一些实验性的盒(未来可能添加到规范中).盒的…

认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Context 的元素的特点 其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性. 相邻的块级元素的垂直边距会折叠(collapse). 每一个元素左外边(margin)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边)…

原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatting 9.4 Normal flow Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level bo…

Block Formatting Context,中文直译为块级格式上下文. 1. BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(c…

在写样式时,往往是添加了一个样式,又或者是修改了某个属性,就达到了我们的预期. 而BFC就潜藏在其中,当你修改样式时,一不小心就能触发它而毫无察觉,因此没有意识到BFC的神奇之处. 什么是BFC(Block Formatting Context) 写CSS样式时,对一个元素设置css,我们首先要知道这个元素是块级元素还是行内元素,而BFC就是用来格式化块级盒子的. Formatting Context:指页面中一个渲染区域,并且拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系…

我们在前端的学习过程中常常会遇到BFC,用BFC来解决一些margin塌陷.margin合并清理浮动流的问题 那么问题来了,我们所说的BFC到底是个什么东西呢: 什么是BFC BFC(Block Formatting Context)即“块级格式化上下文.我来简单的解读一下: 1.块级对应单词Block,不难想到的就是display中block属性,block属性是将此元素作为块级元素显示,根据块级元素的特性进行渲染,具体的特性下文再来细说. 2.格式化Formatting,格式化这个此相信不用…