块级格式化上下文（BFC）是什么呢？

最新推荐文章于 2022-07-11 22:19:03 发布
最新推荐文章于 2022-07-11 22:19:03 发布
阅读量135 收藏
点赞数 1
分类专栏： HTML/CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lichen12345890/article/details/108051444
版权

块级格式化上下文（BFC）是什么呢？
定义：独立的渲染区域，规定了内部的Block-level Box布局，而且这个区域与外部没有联系。
哪些元素会生成BFC？
1、根元素
2、浮动元素
3、绝对定位元素和固定定位元素
4、非块级盒子的块级容器
5、overflow不为"visible"的块级盒子

*BFC的区域不会与浮动元素区域重叠。
*计算BFC高度时，浮动元素也参与计算。

李溏
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS理解块级格式上下文（BFC）
09-24
BFC(Block formatting context)直译为"块级格式化上下文"。它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.接下来通过本文给大家介绍CSS理解块级格式上下文（BFC）的相关知识，感兴趣的朋友...
BFC（块级格式化上下文）详解
weixin_42281924的博客
12-09 242
1.什么是BFC BFC 全称为 块格式化上下文 (Block Formatting Context) 。 2.BFC有啥作用 1.使 BFC 内部浮动元素只在内部发挥作用，不会不会影响到外部 2.解决边距重叠问题（同时能清除浮动） 3.BFC的原理（BFC的渲染规则） 1.BFC元素垂直方向的边距会发生重叠 2.BFC的区域不会与浮动元素的box重叠，可以包含浮动元素（用来清除浮动） 3.BFC...
详解BFC：块级格式化上下文
icemwj的博客
10-06 2734
1、什么是BFC以及如何创建BFC （1）BFC 的概念： BFC（Block formatting context），即块级格式化上下文，它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。 在一个 Web 页面的 CSS 渲染中，块级格式化上下文 （Block Fromatting Context）是按照块级盒子布局的。 （2）W3C 对 BFC 的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks，table-cells 和
BFC--块级格式化上下文
weixin_43581952的博客
09-28 9034
BFC(Block formatting context) （1）概念： 直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. ·我理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。 （2）实现BFC属性的方法： 1. 浮动元素，float 除 none 以外的值 2. 定位元素，position的值不是stati...
BFC(块级格式化上下文)
qq_52301431的博客
04-15 3650
目录 BFC(块级格式化上下文) （1）元素的显示模式 （2）哪些元素会生成BFC （3）BFC布局规则 （4）BFC的主要用途 1. 清除元素内部浮动 2. 解决外边合并问题 3.阻止元素被浮动元素覆盖 BFC(块级格式化上下文) BFC（Block formatting context） 直译为“块级格式化上下文”。 （1）元素的显示模式 我们之前学过元素的显示模式：display。 分为 块级元素、行内元素、行内块元素。其实，display还有很多值 .
深入理解块级格式化上下文(BFC)
白日梦先生的博客
03-30 4181
一、 什么是BFC 块级格式化上下文，Block Formatting Context，也就是常说的BFC，它是Web页面的可视化CSS渲染区域的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 BFC的布局规则如下： 内部的盒子会在垂直方向，一个一个地放置 BFC是页面上的一个隔离的独立容器 属于同一个BFC的两个相邻Box的上下margin会发生重叠 计算...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上下文”。 先...
CSS布局基础BFC
01-21
但是它的重要性确是杠杠的，可以这么说，没有它就就没有什么css布局 BFC,全称 Block Formatting Context，翻译成块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素...
BFC实现自适应两栏布局
01-20
BFC(Block Formatting Contexts)即块级格式化上下文，首先得是块元素，其次具备触发条件之一的才可以是BFC。 BFC的触发条件可以是 根元素；html标签本身就是一个BFC float的值不为none overflow的值不为visible ...
什么是块级格式化上下文？
07-07 3723
转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/ 一、BFC是什么？ BFC（Block Formatting Context）直译为“块级格式化范围”。 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Cont
什么是BFC(Block Formatting Context)(块级格式化上下文)
Azyyan的博客
07-11 736
前言：为什么要了解BFC呢，因为遇到了css中可以使用overflow：auto | hidden | scroll 进行清除浮动，就是因为BFC中的布局规则：计算BFC的高度时，浮动元素也参与计算。（清除浮动）。所以就想要了解一下BFC是什么东西。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block forma
关于对CSS中BFC (块级格式化上下文) 的理解
yuliying的专栏
01-06 1955
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML、CSS的基本布局技能，但是有可能还有一些难以琢磨透的专业名词还不是很清楚，比如BFC。今天我们就来聊聊对BFC的理解，以便我们在布局的过程中能够更加得心应手。 概念 BFC(Block Formatt
如何理解BFC（块级格式化上下文）
weixin_45070265的博客
12-20 353
一、什么是BFC？ BFC是(Block Formatting Context)块级格式化上下文,BFC是css布局的一个概念，是一个环境，创建了BFC的元素的子元素不会受外面其他元素的影响。 二、如何创建BFC？ html根元素默认会创建BFC overflow:非visible display:inline-block position: absolute/fixed float: 非none display: table-cell、flex、inline-flex 三、开启BFC的作用 1.解决使
块级格式化上下文bfc有什么用
weixin_30412167的博客
12-12 77
创建规则： 根元素 浮动元素（float不是none） 绝对定位元素（position取值为absolute或fixed） display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素 overflow不是visible的元素 作用： 可以包含浮动元素 不被浮动元素覆盖 阻止父子元素的m...
什么是BFC
weixin_34095889的博客
06-30 223
  在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上...
块级格式化上下文
显磊的博客
01-09 621
块级格式化上下文听说过多次，自己也去看了许多文章，但自己总是觉得晦涩，搞不清楚，后来又再去查了下很多文章，终于觉得自己理解一些了，希望自己描述出来能够准确和易懂。 Formatting context Formatting context 是页面的一个渲染区域，它有着自己的渲染规则，决定渲染区域里面的元素怎么定位，以及里面的元素之间的相互作用。而块级格式化上下文(Block fomatting c...
CSS第二弹——什么是BFC(块级格式化上下文)
泡芙~的博客
07-19 141
CSS第二弹——什么是BFC(块级格式化上下文) 本人是自学前端的一枚小小程序媛，以下内容是自己总结的笔记，如有错误，欢迎大家批评指正！！！！ 什么是BFC BFC又称块级格式化上下文，在网页当中每一个盒子都有着相同的渲染规则，但是当我们为某个盒子触发BFC的时候，这个有特点的盒子就会遵循另一个规则，有人会说遵循另一个规则又会怎样，其实触发了BFC会解决很多问题，首先我们先研究一下怎样会触发BFC呢 怎样会触发BFC 触发BFC的方法有4种 1.position：absolute 2.display：
BFC 块级格式上下文的定义、创建、特点和常见用途
Ahua_Core的博客
07-06 264
BFC 块级格式化上下文的定义、创建、特点和常见用途BFC的定义BFC的创建BFC的特点BFC的用途① 创建BFC，从而消除垂直外边距叠加的现象② 创建BFC，清除浮动带来的影响③ 创建BFC，构建自适应两列布局 BFC的定义 概况如下： BFC 即 Block - Formatting - Context，它是一个仅有块级盒子参与的独立渲染区域。 BFC 规定了这个独立渲染区域内的参与元素（块级盒子）是如何布局的 BFC 是一个独立渲染区域，与外部区域无瓜葛。 BFC的创建 若一个元素具备以下任一特性
BFC是什么？BFC（块级格式化上下文）详解
weixin_55182699的博客
01-16 581
BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，那这句话到底是什么意思呢？我们用代码来说明 <div class="d1" id="BFC1"> <div class="d2"></div> <div class="d3"></div> <d
css中的BFC是什么
最新发布
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值