前端必知必会-BFC案例剖析

简介: 前端必知必会-BFC案例剖析

前端必知必会-BFC案例剖析

简介

在说 BFC 之前,我们先来了解一下标准文档流,标准文档流是指在页面中所有的元素按照从左到右,从上到下这样的一个顺序来进行排列的。

这里的标准文档流其实就是格式化上下文( Formatting Context ),那么什么又是格式化上下文呢,让我们接着往下看。

格式化上下文(Formatting Context)

格式化上下文,简单来说就是一个独立的渲染区域,在这个渲染区域中的元素会按照它的一个渲染规则来进行排列。

标准文档流中的盒子其实就是格式化上下文,只不过它包括块级格式化上下文以及行级格式化上下文,不同格式化上下文的渲染规则不同,它决定了它的子元素按照什么样的规则来排列,以及和其他元素的关系和相互作用。这里需要注意的就是不同的格式化上下文所针对的元素种类也不同。

常见的格式化上下文有以下四种。

  • 【Block formatting context】 BFC 块级格式化上下文

这里的BFC就是我们今天的重点,BFC只针对块级元素

  • 【Inline formatting context】(IFC) 行级格式化上下文

IFC只针对行级元素

  • 【Grid formatting context】(GFC) 网格布局格式化上下文

我们可以在网格容器上定义网格行和网格列

  • 【Flex formatting context】(FFC) 自适应格式上下文

当我们使用 Flex弹性盒子布局实际上就是声明创建了 FFC

什么是BFC?

说了那么多的废话终于到我们今天的主题了,相信看了上面的一些介绍大家应该对 BFC 多多少少有一些了解了吧。

没错, BFC 块级格式化上下文,页面中独立的一块渲染区域,只作用于块级元素,内部的所有块级元素会按照它的一套渲染规则来排列。

如何创建BFC?

既然知道 BFC 是什么了,那么如何创建一个 BFC 呢?

我们来看看 w3cBFC 的定义

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

看不懂没关系,我们来简单的罗列一下。只要满足下面的任何一个条件都可以触发 BFC

  • body 根元素
  • 浮动元素:floatnone 以外的值
  • 绝对定位元素:position ( absolute、fixed )
  • displayinline-block、table-cells、flex
  • overflow 除了 visible 以外的值 ( hidden、auto、scroll )

BFC特性

说了这么多东西,那么有的人可能会问了,BFC 到底可以用来干什么呢,或者说它可以解决什么问题,当我们了解了它的特性就会清楚了。

  • 内部的 Box 会在垂直方向上一个接一个的放置
  • 块级格式化上下文中相邻的盒子之间的垂直边距折叠
  • 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明 BFC 中子元素不会超出他的包含块,而positionabsolute 的元素可以超出他的包含块边界)
  • BFC的区域不会与 float 的元素区域重叠
  • 计算 BFC 的高度时,浮动子元素也参与计算
  • BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

BFC的作用及会产生的问题

上下margin合并

.box1{
            width: 200px;
            height: 200px;
            background: cyan;
            margin-bottom: 30px;
            text-align: center;
        }
.box2{
            width: 200px;
            height: 200px;
            margin-top: 20px;
            background: cyan;
            text-align: center;
        }
<div class="box1">第一个盒子</div>
    <div class="box2">第二个盒子</div>


在上面的例子中我们可以看到,我们给第一个盒子设置下边距 30px ,第二个盒子上边距设置 20px ,按照理论来说,这两个盒子的实际间距应该为 30+20 也就是 50px ,但事实上是这两个盒子的距离只有 30px ,为什么呢。

首先我们的节点是添加在 body 下的,这时候其实已经创建了 BFC 的渲染区域,然后再来看 BFC 特性第二条,块级格式化上下文中相邻的盒子之间的垂直边距折叠,也就是说这时候的上下 margin 发生了重叠,并且只会选用较大的 margin

那么怎么解决这个问题呢,这时候我们只要给其中一个元素创建一个 BFC 的渲染区域就可以,为什么?我们来看 BFC 特性最后一条,每个 BFC 都是独立的,不会与外界元素互相影响。我们直接给 box2 上添加一个 position: absolute 就可以了

高度塌陷

.box{
      background: red;
     }
 .item{
        width: 100px;
        height: 100px;
        float: left;
      }
<div class="box">
        <div class="item">内部的盒子</div>
    </div>


这个问题应该遇到的会比较多点,子元素浮动之后撑不开父元素的高度,这时候我们给父元素创建一个 BFC 就可以了。运用的是 BFC 特性的第5条,计算BFC的高度时,浮动子元素也会计算。我们这里给父元素添加一个 overflow:hidden 这时候父元素的高度就会有了。


其实还有其他一些由于 BFC 引发的问题,由于时间原因,这里我就不一一举例了,有兴趣的朋友可以把其他情况通过邮箱告诉我,我会添加上去。

目录
相关文章
|
2月前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
49 1
前端一键回到顶部案例
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
95 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
43 0
前端基础(十)_Dom自定义属性(带案例)
|
2月前
|
前端开发 数据可视化 容器
前端基础(十六)_BFC、box-shadow(盒子阴影)、text-shadow(文字阴影)
本文介绍了前端开发中块级格式化上下文(BFC)的概念和作用,以及如何创建BFC。同时,文章还讲解了`box-shadow`和`text-shadow`属性的用法,包括如何为元素添加阴影效果,并通过示例代码展示了这些属性的具体应用。
32 0
前端基础(十六)_BFC、box-shadow(盒子阴影)、text-shadow(文字阴影)
|
2月前
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
38 2
|
2月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
59 11
|
2月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
2月前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
3月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
70 0