对 BFC 的理解

news/2024/7/17 3:20:21

对 BFC 的理解

BFC 即 区块格式化上下文,可以理解为一种特殊环境,决定块级盒的布局及浮动影响范围的区域,并附带多项特性,在理解 BFC 之前需要先对:

  • 盒模型
  • 块级元素
  • 行级元素
  • 块级盒
  • 行内盒
  • 匿名盒
  • 定位

进行简单了解

盒模型

组成:内容、内边距、边框、外边距

请添加图片描述

内容区域大小,可以通过 width , min-width , max-width , height , min-height , max-height 控制,即 css 设置的元素宽高只针对内容区域,不含 margin , border

块级元素

css 属性值 display 为 block , list-item, table 的元素

行内级元素

css 属性值 display 为 inline , inline-block, inline-table 的元素

块级盒

块级盒特征:

  • css 属性值 display 为 block , list-item, table 的元素(首先得是块元素)
  • 块级盒默认竖直排列
  • 每个块级盒都参与 BFC 创建
  • 每个块级元素至少生成一个块级盒,称为主会计盒,一些块元素还会生成额外的块级盒,比如
  • , 用来存放符号

请添加图片描述

行内盒

行内盒特征:

  • css 属性值 display 为 inline , inline-block, inline-table 的元素(首先得是行内元素)
  • 行内盒与其他行内元素横向排列为多行
  • 所有的可替换元素(即 display 值为 inline,如 <img> <iframe> <video> <embed> 等)生成的盒都是行内盒,会参与 IFC (行内格式化上下文)的创建
  • 所有的不可替换行内元素(即 dispaly 值为 inline-block 或 inline-table)生成的盒称为原子行内级盒,不参与 IFC 创建

请添加图片描述

匿名盒

匿名盒指不能被 cs 选择器选中的盒子,如:

<div>匿名盒1<p>块盒</p>匿名盒2
</div>

请添加图片描述

上述代码片段,div 和 p 标签都会生成 2 个块级盒,p 标签前后会生成 2 个匿名盒

匿名盒特征:

  • 匿名盒所有可继承的 css 属性都为 inherit
  • 匿名盒所有不可继承的 css 属性都为 initial

定位方案

  • 普通流 (Normal flow)
  • 浮动 (Float)
  • 定位技术 (Position)

普通流

普通流是浏览器默认的 HTML 布局方式,体现在元素检查中就是 ,当 position 为 static 或 relative,且 float 为 none 时,就会触发普通流

普通流特征:

  • 普通流中所有盒按各自的默认排序方式,一个接一个排列
  • BFC 中,盒子竖向排列
  • IFC 中,盒子横向排列
  • 静态定位中( position 为 static ),盒的位置就是普通流中的布局位置
  • 相对定位中( position 为 relative),盒的位置就是普通流中的布局位置,然后依据 top , right , bottom , left 进行指定的偏移(注:即使有偏移,仍然保留原有原有位置。其他普通流不可占用)

请添加图片描述

浮动

  • 浮动定位中,盒称为浮动盒(Float Box)
  • 盒位于当前行的开头或结尾
  • 普通流会环绕在浮动盒周围,除非设置 clear 属性

多个浮动元素,前一个浮动元素位置改变,也会影响后一个浮动元素,如:

浮动元素

请添加图片描述

浮动元素位置改变

请添加图片描述

环绕效果

请添加图片描述

添加 clear 清除浮动
请添加图片描述

定位技术

  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位
静态定位

position 为 static , 即默认的定位方式,此时元素处于普通流中

相对定位

position 为 relative, 可以通过 top , right , bottom , left 进行偏移量调整(相对于自身的偏移量

绝对定位

盒会从普通流中移除, 不影响其他普通流布局

绝对定位特点:

  • 元素属性 position 为 absolute 或 fixed 时,是绝对定位
  • 绝对定位元素的位置, 可以通过 top , right , bottom , left 进行偏移量调整(相对于它的包含块的偏移量
  • 绝对定位为 absolute 的元素,其相对于其最近的一个 relative 、fixed 或 absolute 的父元素(也就是它的包含块中属性为 relative 、fixed 或 absolute 的元素),如果都没有,就相对于 body
固定定位

与绝对定位类似,唯一区别在于其包含块是浏览器视窗

BFC (块级格式化上下文)

BFC 决定块级盒的布局及浮动影响范围的区域

BFC 的创建

以下元素会创建 BFC

  • 根元素 (<html>
  • 浮动元素 ( float 不为 none )
  • 绝对定位元素 ( position 为 absolute 或 fixed )
  • 表格的标题和单元格 ( display 为 table-caption , table-cell )
  • 匿名表格单元格元素 ( display 为 table 或 inline-table )
  • 行内块元素 ( display 为 inline-block )
  • overflow 的值不为 visible 的元素
  • 弹性元素( display 为 flex 或 inline-flex 的元素的直接子元素 )
  • 网格元素( display 为 grid 或 inline-grid 的元素的直接子元素 )

注:以上是 CSS2.1 规范定义的 BFC 触发方式,在最新的 CSS3 规范中,弹性元素和网格元素会创建 F(Flex)FC 和 G(Grid)FC。

BFC 范围

A block formatting context contains everything inside of the element creating it, that is not also inside a descendant element that creates a new block formatting context.

BFC 包含创建它的元素的所有子元素,但是不包括创建了新的 BFC 的子元素的内部元素,体现了 BFC 的隔离思想

即 子元素如果又创建了一个新的 BFC , 那么新的 BFC 里面的内容就不属于上一个 BFC 了,如:

<table><tr><td></td></tr>
</table>

若 table 元素创建的 BFC 我们记为 BFC_table,tr 元素创建的 BFC 我们记为 BFC_tr, td 元素创建的 BFC 我们记为 BFC_td ,则 2 个 BFC 的范围:

  • BFC_td,没有元素,因为 td 没有子元素了
  • BFC_tr,只有 td 元素
  • BFC_table,只有 tr 元素, 不包括 tr 中的 td 元素

即 一个元素不能同时存在于两个 BFC 中

BFC 特性

BFC 除了创建隔离空间,还具有以下特性:示例参见每个特性尾部链接

    1. BFC 内部的块级盒会在垂直方向上一个接一个排列 demo1
    1. 同一个 BFC 下相邻的块级元素可能发生外边距折叠,创建新的 BFC 可以避免这种外边距折叠 demo2
    1. 每个元素的 外边距盒 ( margin box )的左边 与 包含块块边框盒 ( border box)的左边相对齐 (从左到右格式化的情况),从右到左格式化的情况则相反,即使存在浮动也是如此 demo3
    1. 浮动盒的区域不会与 BFC 重叠 demo4
    1. 计算 BFC 高度时, 浮动元素也会参与计算 demo5

BFC 应用

自适应多栏布局

左右栏宽度固定后浮动,中间栏创建 BFC , 由于 盒子的 外边距盒 ( margin box )的左边 与 包含块块边框盒 ( border box)的左边相对齐 ,同时浮动盒区域不会和 BFC 重叠 ,所以中间栏自适应 demo1

防止外边距折叠

创建新的 BFC ,让相邻的块级盒位于不同的 BFC 下,就可以防止外边距折叠 demo2

清除浮动

BFC 内部的浮动元素也会参与高度计算,可以清除 BFC 内部的浮动 demo3

参考文献:

  • https://juejin.cn/post/6960866014384881671
  • https://juejin.cn/post/7061588533214969892
  • https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
  • https://blog.csdn.net/ywforever/article/details/125133371

https://www.xjx100.cn/news/3118900.html

相关文章

C++ 通过CryptoPP计算Hash值

Crypto (CryptoPP) 是一个用于密码学和加密的 C 库。它是一个开源项目&#xff0c;提供了大量的密码学算法和功能&#xff0c;包括对称加密、非对称加密、哈希函数、消息认证码 (MAC)、数字签名等。Crypto 的目标是提供高性能和可靠的密码学工具&#xff0c;以满足软件开发中对…

Apache HTTP 安装和配置下载

文章目录 配置和下载安装服务反向代理安全设置 配置和下载 Apache HTTP 安装和配置下载 https://www.apachelounge.com/download/ 下载完成后解压即可 Apache配置文件 Apache24\conf\httpd.conf修改apache安装路径 Define SRVROOT 安装目录(当前位置)DocumentRoot 指定你…

MacOS 安装 Android Studio 通过 WIFI 无线真机调试

环境&#xff1a;Apple M1 MacOS Sonoma 14.1.1 软件&#xff1a;Android Studio Giraffe | 2022.3.1 Patch 3 设备&#xff1a;小米10 Android 13 一、创建测试项目 安卓 HelloWorld 项目: 安卓 HelloWorld 项目 二、Android Studio 与手机配对 1. 手机开启开发者模式 参考…

基础Python教程之读写sqlite

前言 SQLite 是一种嵌入式数据库管理系统&#xff0c;它是一个自包含、零配置的、服务器无关的数据库引擎。它的设计目标是提供一个轻量级的、高效的数据库解决方案&#xff0c;适用于嵌入式系统、移动设备和简单的应用程序。 Python 是一种高级编程语言&#xff0c;其强大的标…

CSS3样式详解之圆角、阴影及变形

目录 前言一、圆角样式&#xff08;border-radius&#xff09;二、元素阴影&#xff08;box-shadow&#xff09;三、过渡动画样式&#xff08;transition&#xff09;1. transition-property(用于设置属性名称)2. transition-duration&#xff08;设置时间&#xff09;3. trans…

链式栈基础

一.链式栈的栈顶在哪里? 二.链栈的结构: typedef struct LSNode { int data; struct LSNode* next; }LSNode ,*PLStack; //链栈的节点.由于栈顶在第一个数据节点,所以不需要top指针 三.链式栈的实现: //初始化 void InitStack(PLStack ps) { assert(ps ! NULL); if …

爬虫代理技术与构建本地代理池的实践

爬虫中代理的使用&#xff1a; 什么是代理 代理服务器 代理服务器的作用 就是用来转发请求和响应 在爬虫中为何需要使用代理&#xff1f; 隐藏真实IP地址&#xff1a;当进行爬取时&#xff0c;爬虫程序会发送大量的请求到目标网站。如果每个请求都使用相同的IP地址&#xff…

【Ratis】Grpc.proto文件里定义的一些RPC

一、 总览 Raft的提供了三种类型的RPC。分别如下&#xff1a; RaftClientProtocolService&#xff1a;client与server之间的交互RPC&#xff0c;分为ordered和unordered&#xff0c;一种是有序的异步请求流、一种是无序的异步请求流。RaftServerProtocolService&#xff1a;r…