前端什么是BFC

骑猪看日落 2023-03-06 08:05 5阅读 0赞

什么是BFC？

全称块级格式化上下文？什么意思不懂。看了好多博客，基本都是抄的，真心都不是大白话。我今天来总结一下，用菜鸟级别的语言来描述。

BFC 应该可以抽象成一个 独立的个体，出淤泥而不染的白莲花。

是的不受其他元素的影响，始终保持自己独立。就是正常的普通流布局规则，设置的样式是什么样的，就按正常的普通流布局的表现。

内部的子元素 不受外界的影响，外界的元素，也不受内部的元素的影响。各自独立生活在html这片空间下。

BFC触发条件：

【1】根元素，即HTML元素

【2】float的值不为none

【3】overflow的值不为visible

【4】display的值为inline-block、table-cell、table-caption

【5】position的值为absolute或fixed

BFC布局规则：  
1.内部的Box会在垂直方向，一个接一个地放置（不设置浮动，设置浮动那肯定是 左右一行排列了）。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的）

3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）

4.BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响，外面的也不受BFC区域里面的影响（这个挺重要的，设置的浮动的元素，脱离了文档流，正常的相邻的元素会跑到它下面（靠左）。设置成BFC，自己独成一块，不会跑到它下面，而是保持洁身自好，自己依然占一块。）

6.计算BFC的高度时，浮动元素也参与计算（就是子元素设置浮动，脱离文档流，父元素高度塌陷，给父元素设置BFC，那么父元素高度就不会忽略浮动的子元素，从而高度就不会塌陷，这样理解，好像是BFC又把脱离文档流的元素，又拉回来了，但保持了浮动的特点。）  
作用：？？？

哎呀，成天写页面，其实经常用到，但是可能不知道这个就是BFC的知识。

比如：

两栏布局、清除浮动用overflow：hidden；等说实话，布局，有很多办法，但是，清除这些东西，能更好的来写DOM和CSS还是要好好理解理解的，之前都是瞎几把布局。虽然效果也能出来，但是写了很多不必要的代码吧。

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是BFC以及应用！

什么是BFC以及应用 BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块

￡神魔★判官ぃ/ 2023年06月24日 06:24/ 0 赞/ 149 阅读

相关前端什么是BFC

什么是BFC？全称块级格式化上下文？什么意思不懂。看了好多博客，基本都是抄的，真心都不是大白话。我今天来总结一下，用菜鸟级别的语言来描述。 BFC 应该可以抽象成一个独

骑猪看日落/ 2023年03月06日 08:05/ 0 赞/ 6 阅读

相关前端知识，什么是BFC？

什么是BFC？ BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白B

比眉伴天荒/ 2022年12月30日 13:33/ 0 赞/ 205 阅读

相关前端CSS之BFC详解

BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box

左手的ㄟ右手/ 2022年12月10日 10:03/ 0 赞/ 186 阅读

相关【CSS】什么是BFC？

看面经的时候看到这样两个问题： > BFC是什么？举个例子？ > margin重叠问题？如何解决？之前没有系统的了解过，所以就整理一下相关的知识。 1. BFC

àì夳堔傛蜴生んèń/ 2022年11月28日 13:17/ 0 赞/ 201 阅读

相关 BFC是什么？

BFC简介 > BFC全称Block Formatting Context，名为“块级格式化上下文”。 > BFC它决定了元素如何对其内容进行定位，以及与其它元素的关

深藏阁楼爱情的钟/ 2022年11月19日 01:17/ 0 赞/ 176 阅读

相关什么是前端工程化

![fffca70a1a57d38fc3182a75755cf74c.png][] 来源：Lucas HC https://www.zhihu.com/question/4

曾经终败给现在/ 2022年11月15日 05:54/ 0 赞/ 190 阅读

相关前端高频面试题：BFC是什么，怎么样形成BFC，BFC有什么作用？

BFC是什么，怎么样形成BFC，BFC有什么作用？ BFC （Block Formatting Context）是块级格式化上下文，是Web页面中盒模型布局的CSS渲染

悠悠/ 2022年10月31日 00:53/ 0 赞/ 198 阅读

相关 html BFC是什么

一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元

小灰灰/ 2022年05月30日 02:58/ 0 赞/ 332 阅读

相关前端MVVM是什么？

前端MVVM是什么？ MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将...

朱雀/ 2020年07月01日 20:18/ 0 赞/ 721 阅读