对BFC规范的理解？

最新推荐文章于 2023-06-05 20:14:58 发布
最新推荐文章于 2023-06-05 20:14:58 发布
阅读量99 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/113103505
版权
  • 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型
  • 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响
LuckXinXin
关注
专栏目录
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 464
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
前端CSS理解 —— BFC(块级格式化上下文)
最新发布
upgrade_bro的博客
08-04 205
BFC即 Block Formatting Contexts (块级格式化上下文)，BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素）。应用BFC可以避免margin折叠、清除浮动……
对BFC规范的理解
麋鹿鲁哟的博客
07-09 1038
什么是BFC？ BFC 全称为 块级格式化上下文（Block Fromatting Context），是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。简单的来说，它就是一种会影响元素与元素之间的位置、间距的属性。 BFC 的特性 1.内部的box会在垂直方向，从顶部一个接一个的放置 2.box垂直方向的距离由margin决定，属于同一...
BFC规范的理解
weixin_45656737的博客
09-24 703
视频：click 【理解】：块格式化上下文（block formatting context），一个新的BFC盒子是独立布局，盒子内子元素样式不会影响到外面的元素， 【触法BFC】： 浮动元素 float ＝ left | right 或 inherit（≠ none） 绝对定位元素 position ＝ absolute 或 fixed display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption overflow ＝ h
10分钟理解CSS BFC原理及其应用
09-27
BFC是Block Formatting Context的缩写，它是W3C CSS2.1规范的一部分，描述了一种特定的渲染环境。在这个环境中，元素的布局受到BFC规则的控制，包括元素如何相互定位，以及与其他元素的关系。 以下是一些触发BFC...
haslaylout 和 bfc解析的理解
09-22
BFC（Block Formatting Context），即块级格式化上下文，是CSS中的一种布局方式，它决定了元素如何对其内容进行定位以及与其它元素的关系和相互作用。BFC在Web前端开发中是一个重要的概念，尤其在解决布局问题时，...
[css] 简述你对BFC规范的理解
歌谣的博客
02-25 682
[css] 简述你对BFC规范的理解 是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。 形成条件（任意一条） float的值不是none position 的值不是static或者relative display的值是inline-block,table-cell,flex,table-caption或者inline-flex overflow的值不是visible 特性
BFC 规范的简单理解
weixin_43730646的博客
11-21 205
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有block-level box 参与，它规定了block-level box如何布局，并且与这个区域外部毫不相干。 布局规则： A. 内部的 Box 会在垂直方向，一个接一个第放位置 B. Box 垂直方向的距离由 margin 决定。 属于同一个 BFC 的两个相邻 Box 的 ma...
【CSS】对 BFC 规范的理解
Dora_5537的博客
08-09 465
常见的定位方案 定位方案用于控制元素的布局，有三种常见方案: 1）普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 2）浮动 (floa...
BFC规范
way_wan的博客
08-30 362
BFC BFC的基本概念 W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 BFC特性 内部的Box会在垂直方向，从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，与方向无关。 每个元素的margin-left， 与包含块(border-left)的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float的元素区域
5月23日——谈谈对BFC规范的理解
weixin_33858249的博客
05-23 88
一、什么是BFC？ 　　　　BFC（block formatting context）：简单来说它就是一种属性，这种属性会影响元素与元素之间的位置、间距 二、形成BFC的条件 　　　　1、float：给元素添加浮动（属性值为left、right，但none除外） 　　　　2、position：给元素添加定位（属性值为absolute或fixed） 　　　　3、display：给元素添...
前端面试题---对BFC规范的理解
qq_42367749的博客
03-28 589
BFC有点晦涩难懂，建议通过例子进行理解，理解他有什么具体的作用 定义 BFC 全称为 块格式化上下文 (Block Formatting Context) 。 官方定义：一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 元素变为BFC的条件 根元素或其它包含它的元素 浮...
面试官: 谈谈你对BFC的理解以及外边距合并的问题
qq_63299825的博客
06-05 2040
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则,1.内部的盒子会在垂直方向上一个接一个的放置2.对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。3.每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此4.BFC的区域不会与float的元素区域重叠5.计算BFC的高度时，浮动子元素也参与计算。
BFC的简单理解
qq_25461519的博客
07-15 165
BFC对于很多刚开始接触CSS布局的同学来说，看起来很高大上，其实对于它的的理解只要掌握以下几点就可以了1.BFC中文含义为块级格式化上下文，即一个独立的布局环境；2.BFC中的元素与外部元素互不影响；3.BFC中的块级盒子从顶端开始垂直排列，两个块级盒子的垂直外边距会发生重叠；4.BFC它不会与浮动元素发生重叠；5.BFC元素在计算高度时，其浮动的子元素的高度也会算进来。...
理解CSS中的BFC与IFC：原理与应用解析
BFC是由W3C CSS2.1规范引入的概念，是页面渲染的一个独立区域，其中的元素遵循特定的布局规则。BFC的主要特点包括： 1. **内部盒子的垂直排列**：BFC内部的子元素会在垂直方向上依次排列。 2. **独立性**：BFC是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值