BFC: 优化网页渲染的秘密利器

于 2024-10-11 08:37:57 发布
阅读量634 收藏 16
点赞数 22
分类专栏： CSS 文章标签： 前端 javascript web css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianyin925/article/details/142843720
版权

一、什么是 BFC

  1. BFC 全称 Block Formatting Context, 中文可译为 块级格式化上下文
  2. 对于浮动元素、绝对定位元素、非块级盒子的块级容器(inline-block、table-cells、table-captions)、overflow 值不为 visiable 的块级盒子, 容器内部将创建新的 BFC
  3. 具备 BFC 特性的元素, 内部将形成独立的渲染区域, 可以看成是一个容器, 容器内的元素和外部元素互不影响
  4. 在 BFC 内, 块容器从顶端开始垂直地一个接一个地排列, 两个容器之间的垂直的间隙是由他们的 margin 值所决定的, 在同一个 BFC 中, 两个相邻的 块级盒子 的垂直外边距会产生折叠, 注意这里说的是 块级盒子 是指 display 的值为 block 的块级容器, 如果一个容器是 block 一个是 inline-block 那么他们的 margin 是不会发生折叠(下面将会进行详细描述)

二、如何触发 BFC

  1. 根元素 <html> 自带 BFC 特性
  2. float 属性值不为 none
  3. overflow 属性值不为 visible(默认值)
  4. display 属性值为 table-cell table-caption inline-block flow-root 中的任何一个
  5. position 属性值不为 relative 和 static

三、BFC 特性(应用场景)

3.1 BFC 内容器排列规律

  1. BFC 里面的容器都会以垂直方向排列, 并且两个相邻 块级容器 的上下 margin 会发生重叠
<style>
  .box{
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 2px solid red;
  }
  .parent {
    display: flow-root;
  }
</style>
<div class="parent">
  <div class="box"></div>
  <div class="box"></div>
</div>

  1. BFC 内 margin 值合并只针对两个块级容器(display 的值为 block), 如下例子一个容器是 block 一个是 inline-block 那么他们的 margin 是不会发生合并
<style>
  .box{
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 2px solid red;
  }

  .box1 {
    display: inline-block;
  }
  
  .parent {
    display: flow-root;
  }
</style>
<div class="parent">
  <div class="box box1"></div>
  <div class="box"></div>
</div>

  1. 上面例子中 box1 设置了 display: inline-block 会触发了 box1 容器的 BFC, 但是 box1 容器是否触发 BFC 并不会影响 margin 的合并, 主要是因为 margin 的合并现象只针对块级容器, 下面例子将 display: inline-block 修改为 overflow: hidden; 同样触发了 box1 容器 BFC, margin 依然发生重叠
<style>
  .box{
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 2px solid red;
  }

  .box1 {
    overflow: hidden;
  }
  
  .parent {
    display: flow-root;
  }
</style>
<div class="parent">
  <div class="box box1"></div>
  <div class="box"></div>
</div>

3.2 BFC 解决 margin 穿透问题

依据: 当容器触发 BFC 那么该容器就将是独立的渲染控件, 容器内外元素不会相互影响

  1. margin 穿透现象: 如下演示代码, 子元素设置了 margin 但是 margin 并没有作用与父元素(和父元素间没有产生间距), 而是作用于父元素相邻的元素上
<style>
  .parent {
    background: rgba(255, 0, 0, 0.5);
  }

  .child {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background: rgba(0, 255, 0, 0.5);
  }
</style>
<div>这是和父元素相邻的元素</div>
<div class="parent">
  <div class="child"></div>
</div>

  1. 解决办法: 为父元素创建 BFC, 如此容器内外元素就不会产生干扰

补充: BFC 并不是解决 margin 穿透的唯一方法, 还可以通过为父元素设置 border、 padding 等方法来解决 margin 穿透

<style>
  .parent {
    display: flow-root;
    background: rgba(255, 0, 0, 0.5);
  }

  .child {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background: rgba(0, 255, 0, 0.5);
  }
</style>
<div>这是和父元素相邻的元素</div>
<div class="parent">
  <div class="child"></div>
</div>

3.3 BFC 解决子元素浮动, 容器高度塌陷问题

  1. 当子元素发生浮动的情况下, 浮动元素不再参与父元素高度的计算
<style>
  .parent {
    background: rgba(255, 0, 0, 0.5);
  }

  .child {
    float: left;
    width: 100px;
    height: 100px;
    background: rgba(0, 255, 0, 0.5);
  }
</style>
<div class="parent">
  parent
  <div class="child"></div>
</div>

  1. 解决办法: 触发父容器 BFC, 浮动元素将会参与父元素高度的计算
<style>
  .parent {
    display: flow-root;
    background: rgba(255, 0, 0, 0.5);
  }

  .child {
    float: left;
    width: 100px;
    height: 100px;
    background: rgba(0, 255, 0, 0.5);
  }
</style>
<div class="parent">
  parent
  <div class="child"></div>
</div>

3.4 解决兄弟容器和浮动元素重叠问题

  1. 当容器进行浮动时, 该浮动容器将和其兄弟容器进行重叠
<style>
  .parent {
    background: rgba(255, 0, 0, 0.5);
  }

  .float {
    float: left;
    width: 100px;
    height: 100px;
    background: rgba(0, 255, 0, 0.5);
  }
</style>
<div class="parent">
  <div class="float"></div>
  <div class="content">
    在 `BFC` 内, 块容器从顶端开始垂直地一个接一个地排列, 
    两个容器之间的垂直的间隙是由他们的 `margin` 值所决定的, 
    在同一个 `BFC` 中, 两个相邻的 `块级盒子` 的垂直外边距会产生折叠, 
    注意这里说的是 `块级盒子` 是指 `display` 的值为 `block` 的块级容器, 
    如果一个容器是 `block` 一个是 `inline-block` 那么他们的 `margin` 
    是不会发生折叠(下面将会进行详细描述)
  </div>
</div>

  1. 解决办法: 只需要触发兄弟容器(非浮动容器)的 BFC 就能够解决重叠问题, 实现自适应双栏布局
<style>
  .parent {
    background: rgba(255, 0, 0, 0.5);
  }

  .float {
    float: left;
    width: 100px;
    height: 100px;
    background: rgba(0, 255, 0, 0.5);
  }

  .content {
    display: flow-root;
  }
  
</style>
<div class="parent">
  <div class="float"></div>
  <div class="content">
    在 `BFC` 内, 块容器从顶端开始垂直地一个接一个地排列, 
    两个容器之间的垂直的间隙是由他们的 `margin` 值所决定的, 
    在同一个 `BFC` 中, 两个相邻的 `块级盒子` 的垂直外边距会产生折叠, 
    注意这里说的是 `块级盒子` 是指 `display` 的值为 `block` 的块级容器, 
    如果一个容器是 `block` 一个是 `inline-block` 那么他们的 `margin` 
    是不会发生折叠(下面将会进行详细描述)
  </div>
</div>

  1. 补充: 上面例子中如何设置两个容器的间距
  • 为浮动容器设置 margin-right
  • 为非浮动容器设置 padding-left
  • 为非浮动容器设置 margin-left, 主要这里的属性值要大于浮动容器宽度才有效果, 所以这里不推荐该方法
<style>
  .parent {
    background: rgba(255, 0, 0, 0.5);
  }

  .float {
    float: left;
    width: 100px;
    height: 100px;
    background: rgba(0, 255, 0, 0.5);

    /* margin-right: 20px; */
  }

  .content {
    display: flow-root;
    /* padding-left: 20px; */
    margin-left: 120px;
  }

</style>
<div class="parent">
  <div class="float"></div>
  <div class="content">
    在 `BFC` 内, 块容器从顶端开始垂直地一个接一个地排列, 
    两个容器之间的垂直的间隙是由他们的 `margin` 值所决定的, 
    在同一个 `BFC` 中, 两个相邻的 `块级盒子` 的垂直外边距会产生折叠, 
    注意这里说的是 `块级盒子` 是指 `display` 的值为 `block` 的块级容器, 
    如果一个容器是 `block` 一个是 `inline-block` 那么他们的 `margin` 
    是不会发生折叠(下面将会进行详细描述)
  </div>
</div>

四、参考

  1. CSS深入理解流体特性和BFC特性下多栏自适应布局
  2. 快速了解CSS display:flow-root声明
  3. 块格式化上下文
  4. 深入理解BFC和Margin Collapse

image

墨渊君925
关注
专栏目录
前端CSS：BFC和浏览器差异
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-24 758
块格式化上下文（BFC）是指在页面布局中，某些元素会形成一个独立的渲染区域，在这个区域内，元素的布局遵循特定的规则。BFC主要用于解决布局中的常见问题，如元素的浮动问题、高度塌陷问题等。
什么是BFC它有什么作用
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-11 1044
这些规则决定了元素的位置、大小以及它们与其他元素的关系。这意味着，一旦创建了BFC，就可以控制元素之间的重叠和排列，这对于解决一些布局问题非常有用。在CSS布局的世界里，Block Formatting Context（块级格式化上下文，简称BFC）是一个重要的概念，它不仅影响着元素的布局方式，还影响着元素之间的相互作用。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过以上的内容和示例，相信你已经掌握了BFC的基本概念及其在实际项目中的应用。
BFC 到底是个啥？有何神通广大之处？这篇文章带你进入 BFC 的世界
qq_35727582的博客
04-26 4021
在实际开发过程中其实我们不经意间就用到了BFC这一利器解决了我们的问题，一起学习如何使用BFC实现我们想要的效果吧！
Android 开源项目和文章集合（更新：2022.03.21）
热门推荐
z979451341的博客
11-08 16万+
1.再见SharedPreferences，你好MMKV！ https://mp.weixin.qq.com/s/VBMDIE0QHXQAMuIjon-Fjg
深入JVM：线上服务性能问题诊断思路
Code豪客
06-18 888
本文小豪将继续贴近实战，带大家定位并处理线上服务性能问题，梳理诊断思路。常见的线上性能问题主要包含三种，分别是CPU使用率过高、服务响应时间过长和服务运行线程耗尽，一般当出现性能问题时，首要做的就是先排查是否是CPU方面出的问题，CPU过高会明显导致服务运行缓慢，另外如果确定是某个接口导致的响应时间长，但不方便具体跟踪定位是哪个方法执行慢，我们可以使用Arthas工具分析诊断问题。
清除浮动的五中的方法：
weixin_46174785的博客
08-30 194
1、 给浮动元素的父元素添加高度（扩展性不好） 如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多 2、 clear:both; 在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元.
前端技能汇总 知识结构
AI天才研究院
09-13 9812
Frontend Knowledge Structure 项目起源 前端知识结构 可视化效果 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefox (Gecko) Chrome/Chromium (Blink) Safari (WebKit) Opera (Blink) 编程语言 JavaScript/Node.js
github上的学习材料三：前端入门资源汇总
X-Prince的博客
09-17 1411
本篇转载自：https://idoras.com/frontend-resources/ 前言 前端无疑是2016年最火热的技术，没有之一。 各种前端mvc框架层出不穷，angular js，vue，react，前端组件化开发概念已经深入人心。前端工资已经比手机端开发还要高了。 作为个人站长，学习下前端设计也是有必要的，一来有些小的设计问题可以自己解决，同时还能提高自己的审
你不知道的这里都有：前端常见问题整理
黑曼巴
04-10 789
此文较长，文末大惊喜等着你！$HTML， HTTP，web综合问题1、前端需要注意哪些SEO合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywor...
MATLAB输出在工程设计中的应用：仿真与优化的利器
[matlab输出](https://img-blog.csdnimg.cn/3c8e65fdf201408593a769552e4bfc5b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2B5pyI5pen5Z-O,size_20,color_FFFFFF,t_...
【Django项目优化案例】：通过http装饰器提升用户交互体验
![【Django项目优化案例】：通过http...Django项目优化不仅仅是为了提高网页加载速度，更深层的意义在于提升系统的可维护性、扩展性和稳定性。优化理论基础是实现有效优化的起点，它要求我们从项目的架构设计、代码实现
01.HTML和CSS基础知识总结（内附思维导图）
weixin_67140731的博客
04-02 1157
前端HTML和CSS基础知识总结，内附思维导图和开发软件的快捷键
当技术重构遇上DDD，如何实现业务、技术双赢？
q1472750149的博客
01-07 590
百度Geek说正在上传…重新上传取消​架构师 @ 百度 全文9000字，预计阅读时间21分钟 一、困境：项目背景 爱番番沟通基于百度商桥快速完成了产品功能和技术架构的从无到有，但同时也继承了百度商桥历史功能繁杂、技术架构陈旧的缺点。为了能更好地服务于爱番番沟通将来的产品演进，提高产研能效，需要从实际问题出发，聚焦主要矛盾，对产品架构和业务架构进行重构。 为了更好的理解本文内容，以下是必要的名词解释： 1.1 爱番番沟通是什么？ 爱番番沟通是连接访客和商家的在线咨询工具。一方面访客可以...
2022年Web前端开发流程和学习路线（详尽版）
weixin_47367099的博客
06-13 9287
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1315
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 285
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
前端--深入了解es6语法
最新发布
weixin_50559423的博客
10-10 436
ECMAScript是JavaScript的。
使用浏览器原生API实现录屏功能
m0_51431448的博客
10-10 45
本地开发环境中使用正常没问题，但是在生产环境中可能会报错，原因是因为navigator.mediaDevices为undefined了，其实除了navigator.mediaDevices，navigator.clipboard.writeText(‘复制的文本’) 这个复制到剪切板的API也是同样的问题。出现这些问题的原因是浏览器这些自带的一些API都有局限性，可能是为了安全考虑，只有在。好早之前写了个小deme，本来都忘了，现在无意中又翻出来了，所以也来记录一下吧！或者直接先不用图片都可以。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值