什么是BFC？怎么触发BFC？

最新推荐文章于 2024-07-25 08:14:42 发布

不会写代码的小刘c

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量191

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_46783393/article/details/129030602

版权

BFC Block Formating Contexts (块级格式化上下文)是一个独立渲染的区域，内部的布局与外面的毫不相干

默认情况下 html就是一个bfc

BFC的特点

BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠
BFC内部的盒子会在垂直方向，一个接一个的放置
盒子的左边与包含块的边框相接触才可以移动位置
BFC的区域不会与浮动盒子发生重叠
计算BFC的高度时，浮动元素也参与计算

触发条件

1.float属性不为none （left right）

2.overflow的值不为visible（auto scroll hidden）

3.display的值为inline-block

4.position的值为absolute fixed

BFC能干什么

1.解决高度塌陷

2.BFC的区域不会与float box发生重叠（应用自适应两栏布局）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不会写代码的小刘c

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是BFC？怎么触发BFC？

BFC Block Formating Contexts (块级格式化上下文)
复制链接

扫一扫

什么是BFC？它的触发条件有哪些？

越陌度阡

11-13

2687

1. 什么是BFC? Block Fromatting Context，即块级格式上下文。 W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC。 2. BFC的触发条件一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1.根元素； 2.浮动元素。元素..

BFC实现自适应两栏布局

01-20

将右侧栏的`display`属性设置为`inline-block`，同样可以触发BFC，并实现自适应效果。 ```css .left { width: 300px; height: 300px; background: darkred; float: left; } .right { height: 600px; /* 可以...

参与评论您还未登录，请先登录后发表或查看评论

什么是BFC？如何触发BFC

weixin_45397914的博客

07-23

2415

什么是BFC？ BFC(Block formattin context)，直译：“块级格式化上下文”。在页面上形成一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之亦是。那些元素具备BFC的条件？不是所以元素都能产生BFC，w3c规范只有display属性为block，list-item，table的元素，会产生BFC。如：div，h1~h6，p，ul，ol，li等。如何触发BFC？具有产生BFC条件，但是触发才能产生BFC，创造封闭的环境。触发条件： float属性不为none;

什么是BFC？如何触发？

cxywxy666的博客

02-20

129

BFC的定义

BFC是什么？如何触发？BFC解决了什么问题？

夏天的博客

01-05

843

1.BFC是指什么？ BFC = Block Formatting context 意思是块格式化上下文，BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素无论如何布局，都不会影响到区域外元素的布局。这个渲染区域只对块级元素起作用。 2.常见的触发BFC有什么方式 1.浮动元素（float不为none） 2.绝对定位的元素（position为absolute或者fixed） 3.overflow不为visible的块级元素 4.display值为flex、 flow-root 、inlin

BFC是什么？怎么触发BFC?

weixin_42560424的博客

05-10

599

BFC是“块级格式化上下文”的缩写，是一个独立的渲染区域，内部的元素按照一定规则进行布局，不会影响到外部元素的布局。BFC主要用于解决一些常见的布局问题，例如清除浮动、防止margin重叠等。

什么是BFC？BFC的原理是什么？如何创建BFC？

weixin_48494427的博客

04-01

1797

1，什么是BFC？ 1）BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。 2）可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流 3）不是所有的元素，模式都能产生BFC 。w3c规范：display属性为b.

什么是BFC？

weixin_48181168的博客

09-07

3479

1.BFC到底是什么东西 BFC 全称：Block Formatting Context，名为 "块级格式化上下文"。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性 2.怎

什么是BFC？BFC可以解决什么问题

06-16

9467

一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品三、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发四、BFC可以解决的问题1、解决外边距塌陷的问题1）、父子元素的外边距塌陷问题我们在一个元素内部子元素，设置了一个margi

前端-什么是BFC？BFC布局规则、触发条件、应用场景

乌药ice

01-10

4298

什么是BFC？ BFC（Block Formatting Context）直译为“块级格式化范围”。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子。布局规则内部的Box会在垂直方向，一个一个地布置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的Margin会发生重叠，也就是外边距塌陷。每个元素的margin box的左边，

什么是BFC？BFC的形成条件？BFC的应用场景

qq_52822043的博客

09-15

2027

BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。

10分钟理解CSS BFC原理及其应用

09-27

当父元素触发BFC（如设置`overflow: hidden`），它会自动扩展以包裹所有浮动的子元素。 3. **防止元素被浮动元素覆盖**：BFC可以帮助防止非浮动元素被内部的浮动元素覆盖。通过创建BFC，元素会保持其正常布局，不会...

CSS布局基础BFC

09-27

BFC可以通过多种方式触发，如浮动、绝对定位、overflow不为visible的块级元素等。理解BFC对于解决CSS布局问题，如浮动元素塌陷、清除浮动、防止元素重叠、创建自适应布局等具有重要意义。通过熟练掌握BFC，开发者...

CSS理解块级格式上下文（BFC）

12-13

1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级...满足以下条件之一都可以触发BFC，变身为BFC 根元素 float属性不为none position不为

网站基本布局CSS

m0_46608027的博客

07-24

764

* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */

css 作业 2

最新发布

没有 bug 的代码是不完美的！

07-25

642

写完了

【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录

qq_2511276124的博客

07-24

267

flex布局父元素宽度或高度无法被子元素撑开问题。解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==

【前端 02】新浪新闻项目-初步使用CSS来排版

delepaste的博客

07-23

1287

在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。

WebKit的CSS Aspect Ratio Box：重塑响应式设计

2401_85760095的博客

07-24

734

的属性，它允许开发者为元素定义一个理想的宽高比。在WebKit中，这个属性得到了良好的支持，使得开发者可以轻松实现响应式设计。属性在大多数现代浏览器中得到了良好的支持，包括基于WebKit的浏览器如Safari。属性是一个强大的工具，它可以帮助开发者在WebKit和其他现代浏览器中轻松实现响应式设计。属性对性能的影响通常很小，但在一些极端情况下，如大量使用或在性能受限的设备上，过度使用可能会对性能产生一定影响。在这个例子中，所有图片都将保持16:9的宽高比，并且宽度为100%。随着Web技术的发展，

bfc是什么，怎么触发

03-20

BFC可以通过以下方式触发： 1. 根元素或包含根元素的元素 2. 浮动元素（元素的 float 不是 none） 3. 绝对定位元素（元素的 position 为 absolute 或 fixed） 4. 行内块元素（元素的 display 为 inline-block） 5. ...