BFC及其触发条件

最新推荐文章于 2024-08-02 13:35:44 发布
最新推荐文章于 2024-08-02 13:35:44 发布
阅读量222 收藏 1
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60887160/article/details/119651960
版权

BFC（块级元素格式化上下文）Block Formatting Contexts

是一个独立渲染区域，规定内部布局，且与外部毫不相干。

触发条件

overflow不为visible
float不为none
display:inline-block/table-cell/table-caption
position不为absolute/fixed
父元素转换为根元素display:flow-root

尘沙共老
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端CSS必知：BFC及其触发条件
清颖的博客
08-08 6606
文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。 将本人好久之前的 云笔记 搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文） 可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到； 文本类属性的元素（inline)，文本元素和产生了bfc的元
BFC及其工作方式
IT修真院：初学者转行到互联网的聚集地
05-29 236
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【BFC及其工作方式 】 1.背景介绍 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页...
html触发条件,BFC 及触发条件
weixin_32205057的博客
06-05 321
BFC：Block Format Context块格式化上下文(Block Formatting Context，BFC) 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。块级格式化上下文BFC是一个独立的布局单元即这个元素的布局不会影响到其它的元素(这个元素的内容不会超到外面去，不影响其它的元素)想象：这个元素及其子元素在单独的ifr...
BFC 及其应用
lio-zero 的博客
04-25 66
块格式化上下文(Block Formatting Context，BFC) 是 Web 页面的可视化 CSS 渲染的一部分。它是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 BFC 特性 BFC 在 Web 页面上是一个独立的容器，容器内外的元素互不影响 和标准文档流一样，BFC 内的两个相邻块级元素垂直方向的边距会发生重叠 BFC 不会与浮动元素的盒子重叠 BFC ...
bfc详细介绍及其应用实例
ljyahaha的博客
02-22 801
前端布局中有一个经常出现的手段:BFC，从前知识零零碎碎的了解一些，今天专门搜集了这方面的资料，在此总结一下，并给出案例。想要了解BFC，需要有一些预备知识：三种布局手段（标准流、浮动、定位），盒的显示模式display。 1、BFC的定义 Block Formatting Context 块级格式化上下文，属于普通流，我们可以将其看成页面内的一块渲染区域，有着自己的渲染规则，不受其他规则的影响，bfc区域内就像是一个隔离的盒子，内部的元素不影响外部元素。听起来BFC是一个很好的东西，那么如何触发BFC呢？
BFC概念及其应用
松一160
02-23 1839
一、BFC概念 BFC就是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 二、触发 BFC 只...
浅谈BFC及其应用
worm_IT的博客
06-09 2460
        说起页面的布局，不得不提一个容易忽略但是很重要的东西——BFC(block formatting context)，翻译的直接点就是块级格式化上下文，翻译的有意境点就是开辟自己的地盘。以下是我对BFC的一些理解，如你在阅读时发现有错误，为了避免误导其他读者，请及时联系我。一、什么是BFC        BFC是一个独立的渲染区域，只有block-level box参与，它规定了内部...
简述BFC的原理及其应用
沈行的博客
09-15 545
一、常见定位方案 （1）普通流 元素按照其在html的先后位置由上而下布局。 （2）浮动布局（float） 元素先按照普通流的位置出现，然后根据浮动方向尽可能的向左或向右偏移。 （3）绝对定位（absolute） 在绝对定位布局中，元素会脱离文档流。 二、BFC概念 BFC块级格式上下文，属于定位方案中的普通流。 具有BFC特性的元素可以看作是隔了的独立容器，容器里的元素不会在布局上影响到外面的元素。简单的说：可以理解BFC是要给封闭的大箱子，箱子内的元素无论如何交换，都不会影响到外面的元
关于BFC及其应用
lynn_rose的博客
02-23 364
关于BFC（块级格式化上下文）走近BFC一、什么是BFC二、触发条件三、规则四、应用1. 阻止margin重叠2. 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)3. 自适应两栏布局、阻止元素被浮动元素覆盖总结（附加万能清除法解决高度塌陷问题） 走近BFC 一、什么是BFC BFC被很多人提及，但是又有一部分人对此并没有很好的解释，那BFC到底是什...
10分钟理解CSS BFC原理及其应用
09-27
以下是一些触发BFC特性的条件： 1. **根元素（body）** 2. **浮动元素：`float`值不是`none`** 3. **绝对定位元素：`position`值为`absolute`或`fixed`** 4. **`display`值为`inline-block`、`table-cell`、`flex`或...
前端大厂最新面试题-BFC.docx
06-06
BFC的触发条件有多种，包括但不限于： - **根元素**：HTML元素天然就是一个BFC。 - **浮动元素**：当元素的`float`属性设置为`left`或`right`时。 - **溢出隐藏**：当元素的`overflow`属性不是`visible`，而是`auto...
Web知识-前端面试题集合
02-27
- **触发条件**： - 根元素。 - `float` 属性非 `none`。 - `position` 为 `absolute` 或 `fixed`。 - `display` 为 `inline-block`, `table-cell`, `table-caption`, `flex`, `inline-flex`。 - `overflow` 不...
前端面试常见问题规整.pdf
04-13
**触发条件** - 根元素或包含根元素的元素。 - 浮动元素（`float` 不为 `none`）。 - 绝对定位元素（`position` 为 `absolute` 或 `fixed`）。 - 行内块（`inline-block`）元素。 - `overflow` 属性不为 `visible` ...
CSS 的工作原理
07-25 1328
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1417
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 327
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 897
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 387
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
bfc是什么，怎么触发
03-20
BFC可以通过以下方式触发： 1. 根元素或包含根元素的元素 2. 浮动元素（元素的 float 不是 none） 3. 绝对定位元素（元素的 position 为 absolute 或 fixed） 4. 行内块元素（元素的 display 为 inline-block） 5. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值