今天给各位分享bfc的知识，其中也会对bfc圣诞集市进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
1、BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素不会影响到外部。即BFC中的元素的布局是不受外界的影响（ 我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。 ）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
2、BFC布局规则
@1. 在BFC下，内部的Box会在垂直方向，一个接一个地放置。
@2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box 的margin会发生重叠
@3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。
@4. BFC的区域不会与float box重叠。
@5. 计算BFC的高度时，浮动元素也参与计算
触发 BFC 的条件如下：
浮动元素，float 除 none 以外的值
绝对定位元素，position（absolute，fixed）
display 为以下其中之一的值inline-block, table-cell, table-caption, flex,inline-flex
overflow 除了 visible 以外的值（hidden，auto，scroll）
三.BFC的应用
1.解决浮动塌陷问题
效果如上图，可见如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会塌缩为零。解决这种问题，可以为其父元素创建 BFC。
2、自适应两栏布局
我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。
如果我们需要将黑色区域撑到红色的左边，就需要利用规范的第四条：
BFC的区域不会与float重叠：
这时候左栏宽度固定，右栏宽度会随着浏览器宽度的调整而调整，从而实现一个自适应两栏布局。
BFC全称为块格式化上下文(Block Formatting Context)。
这个名字给我们的信息只有“块”“格式化”“上下文”。我们大概可以了解到这个东西是对上下文起作用的。
那里的上下文，HTML文档！
它大概的作用，貌似是格式化上下文，可能不是我们通常意义中的格式化。
一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
BlockFormattingContext块级格式化布局，简称BFC。它是一块独立的渲染区域，这个区域决定了常规流块盒的布局。也就是说，BFC是一块区域，作用是决定常规流块盒的布局。
BFC的创建：
BFC由某个HTML元素创建，下列元素会在其内部创建BFC区域。根元素（HTML元素，HTML元素创建的BFC区域覆盖了所有网页的元素）。浮动定位或者绝对定位元素（float和position：absolute），overflow属性不为默认值（visible）的块盒元素。
1、上海bfc是指上海外滩国际金融服务中心。
2、bfc坐落于外滩金融聚集带核心位置，拥揽上海最优景观资源，总建筑面积约42万平方米，涵盖企业会馆、企业总部、购物中心、艺术中心及精品酒店五大业态，汇聚金融、商业、旅游、文化、艺术等多种功能，同时具有艺术中心、露天舞台等文化功能配套。
在了解BFC之前，先了解两个个概念：
1.box就是盒模型。box是css布局的对象和基本单位，说白了就是咱们网页布局的基石，简单来说一个页面是由很多box（盒模型）组成的。
2.元素的类型也就是display属性。元素的类型和display属性决定了这个 Box的类型。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器-人话就是网页布局的一个范围），因此Box内的元素会以不同的方式渲染（显示）。
概念：BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。
BFC布局规则
1.在BFC下，内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器（父元素）的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。例子：两个div，一个进行浮动，一个不浮动，这时浮动的元素会覆盖没有浮动的元素。给没有浮动的元素加overflow：hidden。就不会重合。
5.计算BFC的高度时，浮动元素也参与计算
如何触发 BFC
1.浮动元素，float 除 none 以外的值
2.position的值不为static或者relative
3.display不为none
4.overflow 除了 visible 以外的值
BFC的应用
1.解决浮动塌陷问题
2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）
3.解决设置margin值重叠问题。
总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。
bfc的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于bfc圣诞集市、bfc的信息别忘了在本站进行查找喔。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件至举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签： #bfc
相关文章
