CSS 中的 BFC 是什么?
大家好,我是前端西瓜哥。今天来学习 BFC。
BFC,为 Block Formatting Context 的缩写,中文翻译为 块格式上下文。
BFC 是 Web 页面 CSS 渲染的一个机制,是块级盒子布局中产生的区域。
你可以将一个 BFC 可以理解为一个容器,里面的元素不会影响到容器外的布局。
怎样的元素属于 BFC?
根元素,也就是 HTML 元素
浮动元素,即使用了 float 属性且值不为 none
绝对定位元素
块级容器(如 display 的值为 inline-blocks、table-cells、table-captions)
overflow 的值不为 visible 的元素
使用了
display: flow-root
的元素。这是新出的值,专门用来创建无副作用的 BFC。兼容性存疑,比较少用。
当然还有一些 CSS 属性也可以触发 BFC,但比较少见,这里就不一一列举了,读者可自行阅读 MDN 文档。
目前来说,最常见的是通过 overflow: hidden
来构建 BFC。一般情况下,它的副作用最小。但如果元素下有超出盒子范围的内容,会被截掉,请谨慎使用。
BFC 的特性
BFC 主要有两个特性,我们来学习一下。
特性1:上下外边距重叠
同一个 BFC 下的两个相邻块级元素,会发生上下方向的 margin 重叠。
比如前一个 div 设置了 margin-bottom: 20px
,下一个 div 设置了 margin-top: 10px
,然后你会发现它们的上下距离其实是 20px(二者的最大值),而不是 30px(二者之和)。
<style>.box {width: 100px;height: 100px;}.b1 {background-color: bisque;margin-bottom: 20px;}.b2 {background-color: blueviolet;margin-top: 10px;}
</style><div class="box b1"></div>
<div class="box b2"></div>
如果想避免这种情况,可以给这两个 div 裹上一个 BFC。
<style>.container {overflow: hidden;}/* ... */
</style><div class="container"><div class="box b1"></div>
</div>
<div class="container"><div class="box b2"></div>
</div>
因为 overflow: hidden
有副作用,所以在实际开发中,我更喜欢用 padding 来替代 margin。
特性 2:浮动元素也会参与计算高度
浮动,是非常奇怪的一种效果。效果类似 word 的文字环绕排版,可以让文字和内联样式环绕着它。
当一个元素被赋予浮动效果后,它会脱落正常文档流,向左或向右平移到所在容器的边框(border)位置,或者碰到另一个浮动元素为止。
浮动元素脱离了正常文档流,一般情况下,计算容器元素的高度时,是考虑浮动元素的高度的。
但 BFC 可以强行让浮动元素参与计算。
<style>.container {/* overflow: hidden; */padding: 5px;border: 1px solid #000;}.box {float: left;width: 100px;height: 100px;background-color: cornflowerblue;}
</style><div class="container"><div class="box"></div>
</div>
上面的这种写法,没有给 container 应用 BFC,会导致容器元素高度塌陷,效果见下图左边。
当我们将 overflow: hidden
的注释去除,容器元素就应用了 BFC,就能得到我们想要的容器元素根据子元素自动撑高的效果了。效果见下图右边。
结尾
BFC 主要掌握它的两个特性就好了:
上下外边距重叠
浮动元素参与 BFC 高度计算
CSS 中的 BFC 是什么?相关推荐
- css中的BFC模型
CSS中的BFC模型 1.BFC是什么 BFC,全称为Block formattingcontext,译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level ...
- CSS中的BFC是什么?怎么用?
文章目录 一.什么是BFC 二.如何创建一个BFC 三.BFC有什么特点 四.BFC有什么用 1.解决外边距折叠问题 2.制作两栏布局 3.清除元素内部的浮动 五.参考资料 一.什么是BFC 官方定义 ...
- CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总 简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
- CSS中的BFC机制
1 什么是BFC 块格式化上下文BFC(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域 ...
- 学习CSS中的BFC
定义 BFC全称为block formatting context,意为块级格式化上下文,是Web页面中盒模型布局的css渲染模式. 可能上面的解释看了有点懵逼,通俗的说BFC指的的是一块区域的布局, ...
- css中的BFC、IFC、GFC、FFC
BFC(块级格式上下文)在面试的时候,关于对BFC的理解是一非常重点的内容,就来看看吧 BFC (Block Formatting Contexts )就是块级格式上下文,是页面盒模型布局中的一种 C ...
- html清除浮动的那一块区域,CSS中的BFC,外边距折叠,清除浮动
BFC是什么? BFC(Block Formatting Context)直译为"块级格式化范围 ". 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定 ...
- CSS中的BFC详解:定义、触发方式及应用场景
1.什么是BFC? BFC就是一个css的一个布局概念,是一个独立的区域,是一个环境. Block Formatting Context:块级格式化上下文. W3C的官方解释: 它决定了元素如何对其内 ...
- CSS中的BFC是什么
一.什么是BFC 一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分.它是块级盒布局出现的区域,也是浮动层元素进行交互的区域. 二.触发B ...
最新文章
- ps一点等于多少厘米_50寸液晶电视尺寸是多少
- setup.s 分析—— Linux-0.11 学习笔记(二)
- 从概率论到Markov Chain Monte Carlo(MCMC)-- 转
- 有道云笔记导入到CSDN博客
- PHP函数调用的新的用法
- 暴力测试也疯狂——论Python代码优化
- 家里的穿墙的网线不好用了,想换一根,换不了,不走明线有什么好办法?
- vim设置Tab为空格
- 第一章数据分析与挖掘概述
- 利用计算机解决鸡兔同笼问题,用计算机解决“鸡兔同笼”
- 康托尔悖论:大全集不存在,即包含一切集合的集合是否存在
- 代码规范 任重而道远
- CMM(Capability Maturity Model) 能力成熟度模型
- 一次让人晕到吐血的接包经历
- 计算机基础 -- 硬件篇
- opencv-python实现数米粒实验
- PHP获取当前页面完整URL地址
- 有关VSCODE无缘无故报红线问题
- 【2019CVPR学习】翻译-Graph Attention Convolution for Point Cloud Semantic Segmentation
- vue-element查看pdf