BFC补充

最新推荐文章于 2025-11-25 13:59:03 发布
原创 最新推荐文章于 2025-11-25 13:59:03 发布 · 71 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

博客介绍了触发BFC的条件，如overflow取值、float设置、display类型、position属性及根元素等。还阐述了触发后的现象，包括垂直排列规则、外边距取值、与浮动区域关系、独立性及高度计算等，对前端布局有重要意义。

1.触发bfc条件

overflow:hidden/scroll/auto

float:left/right

display:inline-block/table-cell/table-caption/flex/inline-flex

position:absolute/fixed

根元素html

 

2.触发之后的现象

a.垂直方向，一个接一个排列

b.属于同一个bfc，上下元素的外间距取较大值

c.margin box的左边与包含块border box的左边相接处

d.浮动区域不会与BFC区域重叠->两列布局、三列布局

e.BFC是独立容器，内部不会影响容器外面的元素

f.计算BFC高度，浮动的元素高度参与计算

前端CSS必知：BFC及其触发条件
清颖的博客
08-08 7191
文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。 将本人好久之前的 云笔记 搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文） 可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到； 文本类属性的元素（inline)，文本元素和产生了bfc的元
CSS中的BFC详解（两栏布局和三栏布局）
weixin_45432334的博客
10-09 1731
一、BFC介绍 BFC（Block fomatting context）“块级格式化上下文”。是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 二、形成BFC的条件 1、根元素 2、float属性不为none 3、position为absolute或fixed 4、display为inline-blo...
静态补充CSS-BFC讲解
weixin_45343878的博客
08-21 271
BFC简介 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等） 首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念 Box 是 CS...
补充知识和BFC
evenzx的博客
08-09 286
1、当浮动和绝对定位：浏览器会让float：none;绝对定位生效。 包含块：视口(viewport)浏览器可视区域，检查器不算可是区域， fixed(固定定位)一般用于导航、页面底部、广告(左下角、右下角、侧边栏)。 举个栗子： <header> <nav>固定位置</nav> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deb
BFC及其特性详解
健子
07-23 2090
什么是BFC BFC（Block Formatting Context）块级格式化上下文，w3c文档描述： 9.4 Normal flow Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level...
表格表单补充及BFC
seeyouhao的博客
04-01 205
1.表格标签的补充： a.表格的数据分组< thead>< thead> 表头 < tbody>< /tbody> 表体 < tfoot>< /tfoot> 表尾 一个表格有一个表头和表尾，但可以包含多个表体 b.列标题标签< th>< /th> 默认的样式：左右居中 文本加粗 c.表格标题< c...
[转+补充]10 分钟理解 BFC 原理
frequencyBounce的专栏
05-24 405
一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HT...
表单元素的补充、BFC
skt__的博客
07-23 146
select>option，下拉框 设置当前多行文本域的宽高：textarea（cols，rows），设置resize时不能拖拽 自带边框的标签：input、hr、select、textarea 置换元素与非置换元素 置换元素：有自身初始宽高，通过改变属性值在浏览器中也会发生改变 非置换元素：除置换元素外都是 常见的行内块：img、input、textarea、select 新增表格应用： 1、cellspacing="单元格与单元格之间的间距" 2、cellpadding=“单元格与
CSS 之 BFC
qq_45284875的博客
01-09 686
CSS BFC： 块级格式上下文，BFC是一个独立的区域，不会影响其他的区域的布局，每一个被bfc元素的子元素不会对外面的元素产生影响 BFC触发的条件： 1. body: body是bfc元素 2. float: left，right,（不是none默认值） 3. position：absolute、fixed、(非relative) 4. 块级元素overflow：scroll、auto、hidden、（非visible） 5. display: flex、inline-block、table-
详解CSS中的BFC及其应用
astonishqft的博客
10-29 411
详解CSS中的BFC及其应用前言何为BFC创建BFCBFC的特性BFC的应用使用BFC来防止文字环绕使用BFC实现两列布局,左侧固定,右侧自适应外边距折叠用于清除浮动总结 前言 在最近的几次面试中频繁地被问到了CSS中的BFC，问到这块的时候直接回答说“不是很清楚”，给面试打了个折扣，回来做个总结，认识下什么是“BFC”？ 何为BFC BFC的全称是Block Formatting Context...
BFC+表格表单的补充
weixin_46578458的博客
04-01 148
BFC BFC 布局规则 块级格式化上下文 1 元素会也块状一层一层往下排列 2 上个元素的下间距和这个元素的上间距会发生重叠 间距去较大的那个值 3 BFC是一个独立的容器 不会影响周围元素的布局 4 计算高度 浮动元素也参与计算 5 元素的左侧会紧挨着父元素的左侧排列 6 BFC中的浮...
【重识前端】什么是BFC、IFC、GFC 和 FFC
cuandeqin2083的博客
08-13 1287
前言 其实在面试的过程中很有可能会被问到“介绍一下BFC” 那今天就一口气把BFC、IFC、GFC 和 FFC这四兄弟给吃透 吃透透 重点介绍一下BFC，他的三兄弟这里只做介绍，感兴趣的可以上网多查查资料然后回来教教我???? 开始 what 其实在说BFC和他的三兄弟之前，我们先了解一下，什么是FC？ 打断一下。说FC之前我希望先说一下BOX BOX 一个页面是由很多元素组成的，而这些元素都是一个接一个盒子。那有人就说了，那border-radius: 50%捏？ Ok, 直接看下图吧： 再来看一个更直
BFC正则工具：便捷的正则表达式开发与测试
在这个给定的文件信息中，我们可以提取如下IT知识点： ### 标题知识点 1. **BFC正则表达式开发测试工具的定义与作用** ...尽管目前存在一些功能上的局限性，它仍然是对正则表达式开发者社区的一项有益补充。
> path <- file.path(bfc$cache, "Human_DLPFC_Visium_processedData_sce_scran_spa$ Error in bfc$cache : $ operator not defined for this S4 class
03-14
### **补充说明：S4 对象操作** 1. **查看对象结构** 使用 `str()` 或 `show()` 查看 S4 对象属性： ```r str(bfc) # 显示对象内部结构 showMethods(class = "BiocFileCache") # 查看支持的方法 ``` 2. **...
【CSS】样式隔离
小秀的博客
11-25 573
方案隔离强度是否需要构建框架绑定适用场景BEM / 命名空间弱否无组件库、辅助手段强是无React / 通用组件Vue强是（Vue CLI）VueVue 单文件组件Shadow DOM极强否无Web Components、微前端CSS-in-JS强是React动态主题、复杂交互组件微前端专用方案强是/否无qiankun、micro-app 等架构。
（4）pytest+Selenium自动化测试-元素定位之CSS Selector定位
11-22 987
CSS Selector 就像 “定位界的瑞士军刀”，通过 ID、Class、属性、层级的灵活组合，几乎能搞定所有复杂元素！核心是掌握 “属性组合” 和 “模糊匹配”，这两个技巧能解决 80% 的实战问题～
Vue项目中 安装及使用Sass（scss）
最新发布
2509_94006474的博客
11-25 246
为什么会有这个安装方法，是因为我在使用常规安装方法时，会出现版本不兼容问题，导致安装失败，所以 尝试了一个新的方法，如下。的版本，因为它会根据 npm 依赖项自动安装合适的版本。项目就可以正常使用sass啦~：nodejs环境中将sass转css。2.在这个配置中，你不需要指定。：把 sass编译成css。
html css js网页制作成品——html+css+js5 页 jk制服附源码
卡拉米
11-21 834
本文介绍了一个关于中国篆刻艺术的静态网站设计与实现方案。网站采用HTML5+CSS3技术构建，包含首页、作品展示、历史渊源等二级页面，采用浮动布局兼容主流浏览器。内容涉及HTML结构代码示例，包括导航栏、banner区和作品展示画廊的实现。文章还提供了学习建议，推荐编程初学者通过刷题巩固基础。网站素材包含精选图片资源，文件结构清晰，可使用多种编辑器进行修改。该模板可灵活应用于美食、旅游等多种主题的展示型网站开发，适合作为学习参考或毕业设计项目。
TailwindCSS 学习笔记
fmk1023的博客
11-21 279
的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。标签内引入编译好的 CSS 文件，然后就可以开始使用。他快速、灵活、可靠，没有运行时负担。配置文件中添加所有模板文件的路径。的工具类 来为你的内容设置样式了。一般添加到globals.css。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值