如何创建块级格式化上下文(block formatting context),BFC有什么用

最新推荐文章于 2021-10-06 17:30:49 发布
最新推荐文章于 2021-10-06 17:30:49 发布
阅读量184 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/113035341
版权

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

LuckXinXin
关注
专栏目录
css入门之块格式化上下文
蛐蛐的博客
03-13 643
文档：Block formatting context - Developer guides | MDN 1.简介 块格式化上下文是网页视觉 CSS 渲染的一部分。 它是块框布局发生的区域以及浮动与其他元素交互的区域。 2.定义 块格式化上下文由以下情况创建： 文档的根元素<html>。 浮动，float不是none的元素。 绝对定位的元素，position为absolute或fixed的元素。 内联块，display为inline-block 表格单元格，d
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 471
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
如何创建块级格式化上下⽂(block formatting context)，BFC有什么⽤
笑望灬星辰
04-01 201
如何创建块级格式化上下文(block formatting context)，BFC有什么用 1. 创建规则： 1.1 根元素 1.2. 浮动元素（ float 不取值为 none ） 1.3 绝对定位元素（ position 取值为 absolute 或 fixed ） 1.4 display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex 之⼀的元素 1.5overflow 不取值为 visible 的
BFC（Block Formatting Context）块级格式化上下文
木习习的博客
07-02 347
平时用到的一些布局方法，例如给父元素加overflow:hidden清除子元素浮动，例如给同级的两个块级元素一个加上浮动，另一个加上overflow:hidden来实现一侧定宽，一侧自适应。这些都是对BFC的应用。 BFC规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。 BFC布局规则 浮动元素会计入BFC的高度。 属于同一个BFC的两个相邻的块级元素会发生...
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
CSS进阶之块级格式化上下文
xun__xing的博客
07-14 918
块级格式化上下文一、块级格式化上下文1.引言2.作用3.区域关系二、应用 一、块级格式化上下文 1.引言 全称Block Formatting Context，简称BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。 创建BFC渲染区域，有三种方式 1.根元素 2.浮动和绝对定位元素 3.overflow不等于visible的块盒 使用时按对布局影响最小的方式使用 2.作用 不同的BFC区域，它们进行渲染时互不干扰 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
块级格式化上下文
显磊的博客
01-09 671
块级格式化上下文听说过多次，自己也去看了许多文章，但自己总是觉得晦涩，搞不清楚，后来又再去查了下很多文章，终于觉得自己理解一些了，希望自己描述出来能够准确和易懂。 Formatting context Formatting context 是页面的一个渲染区域，它有着自己的渲染规则，决定渲染区域里面的元素怎么定位，以及里面的元素之间的相互作用。而块级格式化上下文(Block fomatting c...
块级格式化上下文 Block formatting context （BFC）
monkeyHI
04-12 393
详情地址：块级格式化上下文 Block formatting context （BFC） 1. Box 视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子。盒子主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。 （1）块盒 当元素的display为block、list-item或ta...
前端面试 BFC
Gueyue的博客
10-16 281
BFC(边距重叠解决方案) 渲染规则： 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 BFC的区域不会与浮动的元素重叠 BFC里面是一个独立的容器外面的元素不会影响里面的元素，里面的元素同样不会影响外面的 计算BFC高度的时候，浮动元素也会参与计算 如何创建BFC： float值补位none position的值不是static、relative display的值为ta...
BFC环境(block formatting context块级格式化上下文)
ThReE_To的博客
09-27 950
布局规则： 1.在BFC环境内部的所有元素按照垂直方向上一个接一个的放置； 2.相邻盒子（BOX）在垂直方向的margin值会重叠； 3.内部盒子会以BFC的左边（右边）线接触，浮动也是这样的； 4.BCF区域不会与浮动盒子重叠； 5.BFC环境中的子元素以外界分离，不会影响到外面的元素，而外面的元素也不会影响到BFC里面的元素。 6.BFC中浮动元素
块级格式化上下文（block formatting context）BFC
weixin_34342992的博客
07-14 127
最近实在是很郁闷。因为越发的感觉有些东西，有时候我们很少用或者是没有意识的去用的时候，就会忘记，比如BFC，这个概念我很早之前就看过，但是 经常的自己还是会忘记，这就是我目前学习碰到的问题了，没有意识到技术点，用或者不用自己不会考虑很多，所以好记性不如烂笔头，自己还是得总结一下。 思考： 1，BFC是什么？ 　　　 2，BFC 的特性是什么？ 　　 3，BFC如何触发？ 　　...
CSS的BFC block formatting context (块级格式化上下文)
qq_40774743的博客
06-15 248
解释 ： 块级格式化上下文， 在浏览器中，创建一个独立的渲染区，该区域内的元素不会影响区域外的元素。w3c 定义：  1.浮动，2，绝对定位，3，非块级元素的块级容器（inline-blocks, table-cells, 和 table-captions）4，overflow的值不是visiable 的块级元素以上，都会为他们创建BFC 即 块级格式化上下文；可以解决的问题举例如下（不限制于下）...
块级格式化上下文（Block Formatting Context）
letterTiger的博客
02-05 1200
CSS块级格式化上下文是块级盒子的一种能力，这种能力并不是直接通过css属性声明而获得的，而是添加css的一部分相关属性之后自动获得的能力，也就是说没有一个明确的属性就是生成块级格式化上下文的。 块级格式化上下文的能力就是让具有该能力的盒子可以隔绝盒子内外的环境，盒子内部的布局不会影响到盒子外部，同样盒子外部也不会影响到盒子内部。 那么，没有格式化上下文的盒子怎么样才能被盒子外部影响或者说怎么...
详解BFC：块级格式化上下文
icemwj的博客
10-06 2844
1、什么是BFC以及如何创建BFC （1）BFC 的概念： BFC（Block formatting context），即块级格式化上下文，它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。 在一个 Web 页面的 CSS 渲染中，块级格式化上下文 （Block Fromatting Context）是按照块级盒子布局的。 （2）W3C 对 BFC 的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks，table-cells 和
深入理解CSS布局与块级格式上下文（BFC）
在Grid布局中，每一格都有自己的格式化上下文，称为Grid formatting context (GFC)，而在Flex布局中，我们有Flex formatting context (FFC)。这些新的布局模型进一步扩展了BFC的概念，为开发者提供了更多控制页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值