原创
2023-07-15 10:26:50
0阅读
block formatting context 块级格式化上下文 形成独立的渲染区域，内部元素的渲染不会影响外界 形成BFC的条件： 浮动元素 float不是none 绝对定位元素 position为absolute或fixed 块级元素的overflow不为visible flex元素 inli
原创
2021-08-19 09:29:04
117阅读
###BFC是什么？ BFC：页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 触发条件： float的值不是none position的值不是static或relative display的值是inline-block、table-cell、flex、table-capt ...
转载
2021-10-08 12:18:00
96阅读
2评论
BFC(块级格式化上下文)那些元素会具有BFC的条件display 属性为 block, list-item, table 的元素，会产生BFC.什么情况下可以让元素产生BFC以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？同样，要给这些元素添加如下一种属性就可以触发BFC。-float属性不为none-position为absolut...
原创
2021-09-02 09:50:01
88阅读
关于BFC 什么是BFC BFC就是一个包含创建该上下文元素的所有子元素的区域 划重点：一个BFC区域只包含其子元素（亲儿子哦），不包括子元素的子元素 并且每个BFC区域都是相互隔绝互不影响的 需要满足什么条件的区域才叫BFC呢 body元素 设置浮动的元素，不包括none 设置定位的元素，abso ...
转载
2021-09-29 23:59:00
82阅读
2评论
触发BFC的方式 是body 元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cell、table-caption、flex、inline-flex overflow 除了 ...
转载
2021-08-12 19:16:00
64阅读
2评论
块格式化上下文, 特性: 使 BFC 内部浮动元素不会到处乱跑； 和浮动元素产生边界。
转载
2020-12-16 17:52:00
80阅读
2评论
1.什么是BFC？ 所谓BFC就是blocking formatting context块级格式上下文。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 最常见的 Formatting context 有 Block
转载
2016-07-25 16:37:00
134阅读
2评论
目录前言导语总结前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷导语BFC编辑总结// BFC 即块级格式上下文， 根据盒模型可知， 每个元素都被定义为一个矩形盒子， 然而盒子的布局会受到尺寸， 定位， 盒子的
原创
2023-08-21 10:34:02
143阅读
BFC的基本概念块级格式化上下文BFC布局规则=>BFC的原理（渲染原理）1.内部的Box会在垂直方向上一个接一个放置2.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box的margin会发生重叠。3.每个元素的margin box的左边，与包含块border box的左边相接触4.BFC的区域不会与float box重叠5.BFC是页面上的一个隔离...
原创
2021-11-19 13:48:01
104阅读
FC Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC “块级格式化上下文”。Block Formatting Contexts就是页面上的一个隔离的渲染 ...
转载
2021-08-17 17:13:00
645阅读
a，形成BFC的条件： 1，浮动元素float 2，加了overflow:hidden/scoll/auto属性（也就是不能为visible） 3，加了定位属性（仅限固定定位fixed和绝对定位absolute，也就是可以脱标的定位） 4，display属性（仅限inline-block，table ...
转载
2021-09-12 21:53:00
292阅读
2评论
1 官方定义 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 2 个人理解 每一个BFC区域只包括其子元素，不包括其子元素的子元素。 每一个BFC区域都是独立隔绝的，互 ...
转载
2021-10-16 01:48:00
118阅读
2评论
原创
2023-06-26 07:07:45
106阅读
说BFC: BFC是css中定义的规范: BFC(Block Formatting Context) 块级格式化上下文，指的是页面布局中的一块区域，它拥有自己的渲染规则，决定自己的子元素如何布局，和其他元素的关系和作用。 只要元素满足下面任一条件即可触发 BFC 特性： 1.body根元素 2.fl
原创
2022-05-29 00:09:11
75阅读
什么是BFCBFC - Block Formatting Context 是块级格式化上下文，它规定了每一个BFC区域只包括其子元素，不包括其子元素的子元素，每一个BFC区域都是独立隔绝的,互不影响!实现触发BFC的条件·body根元素·设置浮动，不包括none·设置定位，absoulte或者fixed·行内块显示模式，inline-block·设置overflow，即hidden，auto，sc
转载
2021-05-16 15:21:13
324阅读
2评论
在公众号看到别人的大厂面试题，里面有一个需要说BFC的实现原理，这个之前简单了解过（详见这篇博客：BFC、IFC、GFC、FFC概念理解、布局规则、形成方法、用处浅析），但是长期不用确实不记得，所以又查一些博客加进了解，其中这篇写的不错，转载如下： 一、BFC 是什么？ 首先，BFC（block f
转载
2021-03-17 18:21:00
109阅读
点赞
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。 一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本
转载
2019-03-21 11:29:00
140阅读
2评论
BFC（块格式化上下文）是CSS布局中的一个重要概念，用于控制块
原创
2023-07-29 03:18:31
79阅读
目录 前言 导语 总结 前言 我是歌谣 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 BFC 编辑 总结 ``` // BFC 即块级格式上下文， 根据盒模型可知， 每个元素都被定义为一个矩形盒子， 然而盒子的布局会受到尺寸， 定位， 盒子的子元素或兄弟元素， 视口的尺寸等因素决定，
原创
2023-11-25 15:50:29
124阅读
