Block Formatting Context

最新推荐文章于 2024-12-16 22:17:10 发布
最新推荐文章于 2024-12-16 22:17:10 发布
阅读量859 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bugknightyyp/article/details/12705273
本文深入解析BFC（Block Formatting Context）在CSS中的作用，阐述其如何定位元素并影响其他元素，通过实例展示如何利用BFC特性避免浮动元素对非浮动兄弟元素及子元素的影响。同时，探讨了创建BFC的方法，如使用overflow属性，以确保布局的正确性和网页的美观。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。所以我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。


例子：

    1、 一个元素浮动了，其父元素不浮动，那么父元素会塌缩；如果子元素和父元素都浮动，则父元素不会塌缩。演示demo

          现时理解：子元素具有float 属性后，导致父元素塌缩，当然它有了自己的BFC。如果再在父元素上增加浮动后，父元素也重新创建一个新BFC，两个不同的BFC，所有互相不会影响，估父元素不塌缩。

          当然父元素也可以加 oveflow: hidden || auto，也使自己不塌缩，原因也和上边一样，父元素也是创建一个新的BFC。


参考：

     javascript100--什么是CSS BFC(Block Formatting Context)

     w3cplus--深入理解BFC和Margin Collapse

对 BFC 规范（块级格式化上下文：block formatting context）的理解？
liuhao9999的博客
03-23 548
相关知识点： 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒 子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲 •BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 •如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC （1）根元素或包含根元素的元素 （2）浮动元素float＝left|right或inh
BFC(Block Formatting Context）
这个Bug怎么解啊？
11-29 172
BFC（Block Formatting Context），块级格式化上下文
BFC（Block Formatting Context）
Ly666_ever的博客
07-13 170
常见定位方案 BFC 概念 触发BFC
一篇搞懂CSS中的BFC（Block Formatting Context，块级格式化上下文）
cuijiying的博客
12-16 1490
CSS中的BFC（Block Formatting Context，块级格式化上下文）是CSS中的一个重要概念，它用于定义元素的渲染和布局规则。BFC的理解和应用在复杂布局和解决一些常见布局问题（如浮动、边距重叠等）中至关重要
BFC(Block Formatting Context)
weixin_42121938的博客
02-23 180
1.什么是BFC BFC(Block Formatting Context)直译为"块级格式化上下文"。 它是一个独立的渲染区域，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。 2.如何触发BFC 根元素html float不为none position为absolute或fixed display为inline-block，table-cell，table-caption，flex，inline-flex overflow不为visible ...
什么是BFC(Block Formatting Context)(块级格式化上下文)
Azyyan的博客
07-11 890
前言：为什么要了解BFC呢，因为遇到了css中可以使用overflow：auto | hidden | scroll 进行清除浮动，就是因为BFC中的布局规则：计算BFC的高度时，浮动元素也参与计算。（清除浮动）。所以就想要了解一下BFC是什么东西。Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和互相作用。最常见的 Formatting context 有 Block forma
块级格式化上下文BFC（Block Formatting Context）
冰的博客
06-23 451
块级格式化上下文（BFC）是WEB页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。具有BFC特性的元素可以看作是隔离了的独立容器（想象成一个独立的箱子），容器内的元素不会在布局上影响到外面的元素（你里箱子里面的物品如何怎么摆放都不会影响到外面），并且BFC具有普通容器所没有的一些特性，且同一个元素不可能同时存在于两个BFC中。
BFC（Block Formatting Context）块级格式化上下文之深层解读
XH_jing的博客
02-23 1644
BFC（Block Formatting Context）块级格式化上下文 注意：BFC首先是块，其次需要具备下面的条件之一才可以（通俗来说，BFC就好比一所985或者211的高校，想要成为985或者211的高校，它是有前提条件的，首先他得是一所大学，不能拿一个小学来说，就好比BFC得先是块，才是BFC；当满足了前提条件，再需要具备其他的条件才可以。） 在正式说BFC具体内容之前，先说一下Box...
请描述 BFC(Block Formatting Context) 及其如何工作
weixin_41838959的博客
09-04 371
请描述 BFC(Block Formatting Context) 及其如何工作 小课堂【北京-WEB-A组】 分享人：郭晨阳 大家好，我是IT修真院北京分院第35期的学员郭晨阳，一枚正直、纯洁、善良的前端程序员。 今天给大家分享一下，修真院官网css任务15，深度思考中的知识点——请描述 BFC(Block Formatting Context) 及其如何工作 1.背景介绍 我们...
BFC（Block Formatting Context，块格式化上下文）
Lycoris_Red的博客
05-07 255
BFC是什么？BFC有什么用？看完全明白 一、BFC是什么？ 官方定义 BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 详见MDN 看不明白？那就对了！ 官方解释若不搞得抽象难懂些，怎能显出高大上？！（手动滑稽） 还是让逆战在新冠疫情期的我来给你解答吧！ 个人理解 1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响； 2、可以通过一些条件触发BF
深入理解 BFC（Block Formatting Context）：原理、触发条件与应用场景
ccc1006的博客
06-04 247
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则他是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
css布局之BFC模式（block formatting context）
01-19
详解BFC【 block formatting context】 BFC这个东西说常见的话你可能不觉得，但是你肯定会常用到，也许你在用的时候也没想到BFC这东西。那它究竟是什么呢，我们来一起看一下。 官方给出的BFC解释是这样的，浮动元素...
Block Formatting Contexts Demo
07-23
2. **溢出处理**：`overflow`属性可以创建Block Formatting Context，当设置为`hidden`、`scroll`或`auto`时，元素的溢出内容会被隐藏，且内部的Block Formatting Context将独立于外部环境。 3. **边距折叠**：在...
<a>标签伪类书写顺序为什么是lvha
crystalNB的专栏
09-17 3057
a标签伪类的作用： ":link": a标签还未被访问的状态； ":visited": a标签已被访问过的状态； ":hover": 鼠标悬停在a标签上的状态； ":active": a标签被鼠标按着时的状态； 写样式时，为毛要按这个顺序写： 其实本质还是“同等优先权的样式，写在后边的会覆盖前边”，a标签的伪类只不过是又结合了不同的动作顺序，动作的触发顺序决定了伪类的顺序必
less
crystalNB的专栏
09-29 1905
学习是个不断深入的过程，记录自己在使用过程中的坑，技巧，心得。当然参考的文章讲解很好的就不用再重复写了，感谢前人的肩膀。 书写规范： 在普通的less文件里，2个class的公用样式，这样写编译正常： .w100, .w1200{ color: red; } 但是在mixins里，这样写就编译通不过(基于version-1.4.2)： .test(){ .
ie6、ie7dom 元素重新渲染
crystalNB的专栏
01-23 1705
初始： 点击“更多以后”： ie6、ie7下出现问题，"芒果推荐"所在的div 没有被撑下来，有底部虚线可知，上一个div确实已经撑开了，但是它的下一个同辈结点怎么没有撑下来，当时，当我鼠标移到“满意度”、“销量”、“价格”这些a标签上时，它就恢复正常了。解决这个点击“更多”不撑开的办法是在它们的父元素上加样式zoom:100%。 正常情况： 在解决这个问题的过
media-type，media-query
crystalNB的专栏
09-16 1680
media type属于css2的规范，用来针对不同的设备，设置不同的样式，让其更符合该设备的渲染习惯，优化输出效果。 media query属于css3的规范，用来根据屏幕的大小、方向（横、/竖）、比值（宽/高，eg:16:9）、色值等，控制不同的样式，实现跨平台。 二者组合可以提供强大的跨平台、跨设备的解决方案。 基本用法：     前端观察 注意几点：     m
perspective
crystalNB的专栏
03-31 1450
perspective：表示用户与z=0的水平面之间的距离。0和负值都是无效值。 如果z轴坐标的值大于perspective的值，就不会画出来了。 使用perspective且值不为0 或 none,就会创建一个新的上下文栈（stacking context）。 参考：           https://developer.mozilla.org/en-US/docs/W
设置双核浏览器的浏览模式
crystalNB的专栏
10-11 1141
360安全浏览器6.5版本可以设置浏览器渲染内核，方法是在头部加元数据 renderer： 参考：     http://www.css88.com/archives/5385
block高度塌陷详解
最新发布
12-26
### CSS Block元素高度塌陷原因 当子元素应用了`float`属性后，这些子元素会脱离标准文档流。这意味着它们不再影响其他按照正常流程排列的兄弟元素的位置，也不会撑起父容器的高度。因此，在某些情况下，即使存在浮动的子元素，父容器也可能表现为零高度，这就是所谓的“高度塌陷”。具体来说： - 子元素浮动之后，无法再像以前那样参与正常的盒模型计算过程[^1]。 - 浮动后的子元素不会对其包含块（即最近的具有定位上下文的祖先元素）贡献任何尺寸上的信息，除非采取特定措施来阻止这种行为[^4]. ### 解决方案概述 针对上述提到的高度塌陷现象，有几种常见且有效的处理方式可以确保父级容器能够正确反映内部浮动元素的实际大小。 #### 方法一：触发BFC (Block Formatting Context) 通过创建一个新的块格式化上下文(BFC),可以让该区域内的所有内容重新遵循常规布局规则而不受外部因素干扰。实现这一点的方法有很多，比如给定`overflow:hidden`, `display:flow-root`(推荐用于现代浏览器) 或者设置固定/绝对定位等样式声明都可以达到目的[^2]。 ```css .parent { overflow: hidden; } ``` 这种方法简单有效，并且不需要额外增加HTML结构或伪类选择器。 #### 方法二：清除浮动(Clear Floats) 利用`:after`伪元素配合clearfix技术可以在不影响原有标记的情况下轻松解决问题。这种方式是在父级元素后面插入一个清除了之前所有浮动效果的新行内框，进而使得整个包裹层得以扩展至应有的宽度和高度[^3]。 ```css .clearfix::after { content: ""; display: table; clear: both; } ``` 此法兼容性强，适用于大多数场景下的开发需求。 #### 方法三：使用Flexbox/Grid布局模式 随着CSS Grid 和 Flexbox 的普及与发展，越来越多开发者倾向于采用更加灵活高效的弹性盒子模型来进行复杂页面构建工作。这两种新型布局机制天然支持多列或多方向项目安排的同时还具备良好的嵌套特性，完全可以规避传统基于浮动的方式所带来的种种弊端[^5]。 ```css .container { display: flex; } /* 或 */ .grid-container { display: grid; } ``` 以上就是对于CSS中由于子项浮动引起父级block元素发生高度塌陷问题及其相应对策的一个总结说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值