前端CSS理解 —— BFC(块级格式化上下文)

原创 已于 2023-08-25 02:53:35 修改 · 283 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #面试 #前端 #html

于 2023-08-04 16:23:59 首次发布

我走得很慢，但我从不后退。人生苦短，何妨一试。

b1f13b9f912120a538c18124a68f9e71.jpeg

1.什么是BFC？

43828bf8c2ea41c6878a076cd6eaf781.png

        BFC即 Block Formatting Contexts (块级格式化上下文)， 是 W3C CSS2.1 规范中的一个概念。BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素），并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

af279b22cd2e45d08f06097678ad8cc9.jpeg

2.BFC特性

具有 BFC 特性的元素可以看作是隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。（因此它可以解决一些布局问题）

66c8e8de87d74c9d97ab6952cb6aeef4.jpeg

官方文档对BFC的描述

最低0.47元/天 解锁文章

200万优质内容无限畅学
对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 542
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
【CSS面试题】BFC
weixin_63681863的博客
03-02 757
BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
前端-什么是BFC？BFC布局规则、触发条件、应用场景
乌药ice
01-10 4825
什么是BFC？ BFC（Block Formatting Context）直译为“块级格式化范围”。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子。 布局规则 内部的Box会在垂直方向，一个一个地布置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的Margin会发生重叠，也就是外边距塌陷。 每个元素的margin box的左边，
【高频考点精讲】深入理解 BFC（块级格式化上下文）及其在布局中的作用
最新发布
全栈老李的博客
06-23 832
简单来说，BFC 是 CSS 渲染时的一块独立区域，它决定了元素如何布局，以及和其他元素的关系。你可以把它想象成一个“结界”，里面的元素不会影响到外面的元素，外面的元素也不会影响到里面。BFC 的触发条件有很多，比如：float不为noneposition为absolute或fixeddisplay为table-cellflexgrid等overflow不为visible（比如hiddenautoscroll。
BFC（块级格式上下文）
lord_of_war的博客
08-30 297
BFC的定义 BFC 全称为 块格式化上下文 (Block Formatting Context) 。 定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 BFC的布局规则 1）内部的box会在垂直方向，一个接一个地放置（可以看作BFC中有一个的常规流）。 2）Box垂直方向的距离有margin决定。属
CSS理解块级格式上下文（BFC）
09-24
【CSS理解块级格式上下文（BFC）】 在CSS布局中，Block Formatting Context（BFC）是一个至关重要的概念，它决定了元素内部块级元素的布局方式，同时保证了这个区域与外部元素的布局互不影响。BFC可以看作是一个...
Web布局中BFC(块级格式化上下文)的应用与解决方案
02-11
内容概要：本文详细解释了块级格式化上下文 (BFC)，这是网页布局系统中的一部分概念，用于确定页面上各元素如何显示。BFC是一个独立布局环境，在该环境中元素按照一定规则进行排布而内外互不干扰，并列出若干布局...
BFC的深层理解和应用场景及布局方式
qq_43421285的博客
02-23 508
一、什么是BFC？(概念) BFC 即 Block Formatting Contexts (块级格式化上下文)，是W3C CSS2.1规范中的一个概念，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与外部毫不相干。通俗一点来讲，可以把BFC看成是一个985或...
BFC介绍(块级排版上下文)
cxy_sdyz的博客
01-02 543
说到BFC，就会涉及到CSS布局的一些基本概念，然后，首先来讲一下关于块级盒的一些概念：下面是来自w3.org中的一句话(参考链接:http://www.w3.org/TR/CSS2/visuren.html#block-formatting)：Block-level elements are those elements of the source document that are forma
BFC（块级格式化上下文）
Tarafireworks的博客
09-07 327
<style type="text/css"> .a, .b, .c { box-sizing: border-box; border: 1px solid; } .wrap { width: 250px; } .a { width: 100px; height: 100px; float: left; } .b { width: 100px; height: 50px; float: left;
BFC(块级格式化上下文)
qq_52301431的博客
04-15 3879
目录 BFC(块级格式化上下文) （1）元素的显示模式 （2）哪些元素会生成BFC （3）BFC布局规则 （4）BFC的主要用途 1. 清除元素内部浮动 2. 解决外边合并问题 3.阻止元素被浮动元素覆盖 BFC(块级格式化上下文) BFC（Block formatting context） 直译为“块级格式化上下文”。 （1）元素的显示模式 我们之前学过元素的显示模式：display。 分为 块级元素、行内元素、行内块元素。其实，display还有很多值 .
深入理解BFC原理与应用
南城
12-03 920
BFC是一个独立的渲染区域，具有自己的布局规则。它是Web页面中块级盒子布局的一种 CSS 渲染模式。BFC内部的元素按照一定的规则排列和渲染，不受外部元素的影响。BFC是块级格式化上下文的缩写，通过一定的条件可以触发元素生成独立的BFC区域，使得元素在布局和渲染时具有独立性。我们可以利用BFC来解决一些常见的布局问题，如清除浮动、阻止外边距合并和实现自适应两栏布局等。通过理解BFC的原理和应用场景，我们能够更好地处理前端开发中的布局相关问题。
什么是BFC(Block Formatting Context)(块级格式化上下文)
Azyyan的博客
07-11 888
前言：为什么要了解BFC呢，因为遇到了css中可以使用overflow：auto | hidden | scroll 进行清除浮动，就是因为BFC中的布局规则：计算BFC的高度时，浮动元素也参与计算。（清除浮动）。所以就想要了解一下BFC是什么东西。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block forma
一文带你彻底弄懂BFC（块级格式上下文）
SCUhzs
10-03 772
文章目录BFC的布局规则形成BFC的条件BFC的作用BFC特性详解特性一特性二特性三特性四特性五特性六BFC应用场景自适应两栏布局清除浮动margin重叠 先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染 区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC 都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。 BF
BFC（块级元素格式化上下文）
weixin_33829657的博客
04-01 319
一、BFC是啥？ Block Formatting Context，它是一个独立的渲染区域，只有块级元素才有BFC,它规定了内部的Block Box如何布局，并且与这个区域外部毫不相干。二、那些元素会生成BFC ①、根元素。 ②、浮动元素。 ③、position为absolute或者fixed。 ④、非块级元素转换成块级元素,例如：display:inline-block,flex等...
2020-09-11
weixin_50753646的博客
09-11 182
#垂直居中 1 父元素：display：flex; 子元素：align-self：center; 2 父元素：display: flex; align-items: center; 这样做会使text-algin:center;失效 解决方法： 子元素：margin: auto;
BFC:什么是BFC？BFC作用？如何创建BFC？BFC应用场景
m0_74114605的博客
03-23 4630
BFC属于普通流。BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做元素的一个属性，当元素拥有的BFC属性，这个元素就可以看作是隔离了的独立容器，容器里边的元素不会影响到容器外部的元素。
深入理解前端面试关键：BFC块级格式化上下文
BFC 在CSS布局中扮演着核心角色，尤其在复杂的网页布局设计中，理解并合理运用BFC可以显著提高代码的可维护性和布局的稳定性。通过掌握BFC，开发者能更好地控制元素的排列方式，解决常见的布局问题，实现更灵活的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值