BFC（Block Formatting Context）是指块级格式化上下文，它是 CSS 中的一个重要概念，用于控制块级盒子在布局时的行为。理解 BFC 对于处理布局、解决布局问题以及避免布局相关的 bug 非常重要。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。创建BFC的一些方法高度坍塌父级元素无法撑起浮动子元素的高度。解决方法，父级元素添加属性overflo
原创
2024-03-19 18:12:22
43阅读
BFC(边距重叠解决方案) 1、BFC的基本概念：块级格式化上下文 2、BFC的原理（说白了就是BFC的渲染规则）： 这个规则是什么呢？我觉得大家能说出4点就够了 第一个就是BFC可以解决这个元素的垂直的边距发生重叠的情况 第二个是BFC的区域不会与浮动元素的box重叠，这个肯定是用来清除浮动的。
转载
2018-12-18 07:07:00
168阅读
2评论
CSS之BFC理解BFC的介绍BFC是一种规则，就像孙悟空三打白骨精里面孙悟空划了一个圈让师父和师弟在圈里，这样子白骨精
原创
2022-11-17 00:18:00
87阅读
看面经的时候看到这样两个问题：BFC是什么？ 举个例子？margin重叠问题？如何解决？之前没
原创
2022-07-12 17:38:00
102阅读
什么是BFC？w3c是这么解释的： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文(block formatting context)。请注意，BFC并不是一个css属性，也不是一段代码，而是css中基于
转载
2021-01-21 11:34:08
165阅读
2评论
一、BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲
转载
2022-10-31 12:48:14
118阅读
w3c关于BFC解释：http://www.w3.org/TR/CSS21/visuren.html#block-formattingMdn描述：
转载
2013-09-29 05:51:00
118阅读
2评论
BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的
原创
2023-02-01 09:50:42
109阅读
SS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。感兴趣的同学可以加文末的微信群，一起讨论吧～1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素
转载
2022-03-29 11:05:40
49阅读
SS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。感兴趣的同学可以加文末的微信群，一起讨论吧～1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素...
转载
2021-06-30 11:55:56
105阅读
一、垂直外边距合并：1、上下垂直相邻的元素互相设置margin上下边距时会取最大的值 2、父子元素（上边合并）子元素设置margin-top时 父元素margin-top也会生效（解决设置父元素padding-top或border-top) 二、内联元素设置width height 无效的，可以设置
原创
2022-06-27 10:52:01
69阅读
1、什么是BFC BFC(Block Formatting Context，块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 通俗讲，BFC就是一种布局方式，在创建了 BFC后，其子元素会一个接一个地放置：盒子们自
原创
2021-08-20 13:49:54
89阅读
CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来…
原创
2021-09-08 16:56:22
139阅读
Formatting Context简单理解，就是定义了布局规则的一片区域。
原创
精选
2022-02-17 23:32:24
727阅读
点赞
大家好，我是前端西瓜哥。今天来学习 BFC。BFC，为 Block Formatting Context 的缩写，中文翻译为 块格式上下文。BFC 是 Web 页面 CSS 渲染的一个机制，是块级盒子布局中产生的区域。你可以将一个 BFC 可以理解为一个容器，里面的元素不会影响到容器外的布局。怎样的元素属于 BFC？根元素，也就是 HTML 元素浮动元素，即使用了 float 属性且值不为 non
原创
2022-05-16 23:31:38
229阅读
1.css的布局技术有哪些？ 正常布局流 display属性 弹性盒子 网格 浮动 定位 CSS 表格布局 多列布局 本文重点涉及到三种布局 正常布局流（normal flow） 正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。块盒独占一行，行盒水 ...
转载
2021-07-26 14:19:00
478阅读
BFC是之前前端面试中经常问到一个问题，这篇文章我们一起来学习BFC。什么是BFCBFC(Block Formatting Context)：快格式化上下文，是web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。它有一套渲染规则，决定了其子元素将如何定位，以及和其他元素的关系和相互作用。快格式化上下文包含创建它的元素内部的所有内容。具有BFC特性的
原创
2021-01-22 10:42:26
246阅读
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>line-height属性</title> <style type="text/css"> /*补充代码*/
原创
2022-12-21 10:29:59
106阅读
在CSS布局中float属性常常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人非常苦恼1 浮动带来布局的便利，却也带来了新问题 1 2 3 4 5 Clear float 6 23 24 25 26 27 ...
转载
2014-10-02 15:04:00
101阅读
2评论
