当前位置： 首页 > news >正文

【CSS】讲一讲BFC、IFC、GFC、FFC

news 文章来源：https://blog.csdn.net/weixin_45620943/article/details/135454394 2024/11/28 11:37:30
1. 前言

        FC（Formatting Contexts），是CSS2.1的一个概念，是页面中的一块渲染区域，具有一套渲染规则，决定FC中子元素如何定位，以及和其他元素的关系和相互作用。在说FC之前说一下文档流。

1.1. 普通流

        元素按照其所有HTML中的位置先后位置至上而下布局，行内元素水平排列，直到当前行被占满然后换行，块级元素则会被渲染为新的完整的一行，元素默认都是普通流定位。

1.2 浮动

        当一个元素被设置浮动效果后，它会脱离普通流，向左右向右偏移所在容器的边框位置，或碰到另一个浮动元素为止。

1.3 绝对定位

        元素会整体脱离普通流，因此绝对定位不会对其兄弟元素造成影响。

2. BFC

        BFC（Block Formatting Contexts，块级格式化上下文）是页面上一个隔离渲染区域，BFC中的子元素不会在布局上影响外面的元素。

BFC形成条件：

  • 根元素，即html元素
  • 显示元素，display：inline-block、table-cell、table-caption三种
  • 定位元素，position除relative、static、sticky值以外的值：absolute、fixed两种
  • 浮动元素，float除none值以外的值：left、right
  • 溢出元素，overflow除visible值以外的值：hidden、scroll、auto

特性：

  • 内部Box（块级元素）垂直方向一个接一个放置（BFC中的子元素之间）
  • 垂直方向上的距离由margin决定（BFC中的子元素之间）
  • BFC区域不会与浮动元素区域重叠（BFC和浮动元素同级之间）
  • 计算BFC高度时，浮动元素也参与计算（BFC和浮动元素父子之间）
  • BFC是页面上一个独立容器，窗口中的子元素不影响外面元素（BFC和其他元素同级之间）
2.1 内部盒子垂直方向一个接一个放置

        不在BFC里，块级Box也会垂直排列，这一条规则不用多说

2.2 垂直方向上的距离由margin决定

        块级元素垂直外边距会折叠，即由外边距较大的为准，不会发生margin穿透问题。

<!DOCTYPE html>
<html>
<head><style>.container {float: left;width: 100px;height: 100px;background-color: red;}.box:first-child {height: 20px;margin: 10px 0;background-color: green;}.box:last-child {height: 20px;margin: 20px 0;background-color: green;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div></div>
</body>
</html>
2.3 BFC区域不会与浮动元素区域重叠

        float元素固定宽度，BFC元素不设置宽度，BFC元素宽度会自适应

<!DOCTYPE html>
<html>
<head><style>.box:nth-child(1) {float: left; /*既是浮动元素，也是BFC*/width: 200px;height: 300px;margin-right: 10px;background-color: red;}.box:nth-child(2) {overflow: hidden; /*设置BFC，不被浮动元素覆盖*/height: 300px;background-color: purple;}</style>
</head>
<body><div class="box"></div><div class="box"></div>
</body>
</html>
2.4 计算BFC高度时，浮动元素也参与计算
<!DOCTYPE html>
<html>
<head><style>.container {background-color: red;padding: 5px;overflow: hidden;}.box {float: left;height: 20px;width: 20px;margin: 20px 0;background-color: green;}</style>
</head>
<body><div class="container"><div class="box"></div></div>
</body>
</html>
2.5 BFC是页面上一个独立容器，窗口中的子元素不影响外面元素
<!DOCTYPE html>
<html>
<head><style>.container {float: left;width: 100px;height: 150px;background-color: red;}.wrapper {overflow: hidden;}.box:first-child {height: 20px;margin: 10px 0;background-color: green;}.box:last-child {height: 20px;margin: 20px 0;background-color: green;}</style>
</head>
<body><div class="container"><div class="wrapper"><div class="box"></div></div><div class="box"></div></div>
</body>
</html>
3. IFC

        IFC（Inline Formatting Contexts，内联格式化上下文） 。

作用：

  • 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中
  • 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中
4. GFC

        GFC（GridLayout Formatting Contexts，网格布局格式化上下文）

形成条件：

  • 显示元素，display：grid、inline-grid两种

参见【CSS】布局方式梳理和总结-CSDN博客中的CSS3网格布局。

5. FFC

        FFC（Flex Formatting Contexts，布局格式化上下文）

形成条件：

  • 显示元素，display：flex、inline-flex两种

参见【CSS】布局方式梳理和总结-CSDN博客中的 CSS3 Flex布局。

参见：

区块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)

CSS深入理解流体特性和BFC特性下多栏自适应布局 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~  

相关文章：

【CSS】讲一讲BFC、IFC、GFC、FFC

1. 前言 FC&#xff08;Formatting Contexts&#xff09;&#xff0c;是CSS2.1的一个概念&#xff0c;是页面中的一块渲染区域&#xff0c;具有一套渲染规则&#xff0c;决定FC中子元素如何定位&#xff0c;以及和其他元素的关系和相互作用。在说FC之前说一下文档流。 1.1. 普…...

编程日记 2024/1/9 3:30:04

阶段十-分布式-任务调度

第一章 定时任务概述 在项目中开发定时任务应该一种比较常见的需求&#xff0c;在 Java 中开发定时任务主要有三种解决方案&#xff1a;一是使用JDK 自带的 Timer&#xff0c;二是使用 Spring Task&#xff0c;三是使用第三方组件 Quartz Timer 是 JDK 自带的定时任务工具,其…...

编程日记 2024/1/9 3:28:02

Godot4.2——爬虫小游戏简单制作

目录 一、项目 二、项目功能 怪物 人物 快捷键 分数 游戏说明 提示信息 三、学习视频 UI制作 游戏教程 四、总结 一、项目 视频演示&#xff1a;Godot4爬虫小游戏简单制作_哔哩哔哩bilibili 游戏教程&#xff1a;【小猫godot4入门教程 C#版 已完结】官方入门案例 第…...

编程日记 2024/1/9 3:25:00

对象的前世今生与和事佬（static）的故事

目录 1.对象村的秘密&#xff08;对象在内存的实现&#xff09; 1.1 内存的好兄弟“堆”与“栈” 1.1.1方法喜欢玩泰山压顶 1.1.2 stack的实现 1.2栈上的对象引用 1.2.1有关对象局部变量 1.2.2 如果局部变量生存在栈上&#xff0c;那么实例变量呢&#xff1f; 1.2.3创建…...

编程日记 2024/1/9 3:22:57

报错curl: (6) Could not resolve host: raw.githubusercontent...的解决办法

我起初想要在macOS系统安装pip包&#xff0c;首先在终端安装homebrew&#xff0c;敲了命令&#xff1a;/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent...)" 之后触发的报错&#xff0c;报错内容&#xff1a;curl: (6) Could not resolve host: raw.…...

编程日记 2024/1/9 3:17:54

【基础篇】十二、引用计数法 可达性分析算法

文章目录 1、Garbage Collection2、方法区的回收3、堆对象回收4、引用计数法5、可达性分析算法6、查看GC Root对象 1、Garbage Collection C/C&#xff0c;无自动回收机制&#xff0c;对象不用时需要手动释放&#xff0c;否则积累导致内存泄漏&#xff1a; Java、C#、Python、…...

编程日记 2024/1/9 3:16:53

C语言算法(二分查找、文件读写)

二分查找 前提条件&#xff1a;数据有序&#xff0c;随机访问 #include <stdio.h>int binary_search(int arr[],int n,int key);int main(void) {}int search(int arr[],int left,int right,int key) {//边界条件if(left > right) return -1;//int mid (left righ…...

编程日记 2024/1/9 3:15:52

流媒体学习之路(WebRTC)——Pacer与GCC（5）

流媒体学习之路(WebRTC)——Pacer与GCC&#xff08;5&#xff09; —— 我正在的github给大家开发一个用于做实验的项目 —— github.com/qw225967/Bifrost目标&#xff1a;可以让大家熟悉各类Qos能力、带宽估计能力&#xff0c;提供每个环节关键参数调节接口并实现一个json全…...

编程日记 2024/1/9 3:14:51

2023版本QT学习记录 -11- 多线程的使用（QT的方式）

———————多线程的使用(QT方式)——————— &#x1f384;效果演示 两个线程都输出一些调试信息 &#x1f384;创建多线程的流程 &#x1f384;头文件 #include "qthread.h"&#x1f384;利用多态重写任务函数 class rlthread1 : public QThread {Q_OBJE…...

编程日记 2024/1/9 3:13:50

iOS苹果和Android安卓测试APP应用程序的差异

Hello大家好呀&#xff0c;我是咕噜铁蛋&#xff01;我们经常需要关注移动应用程序的测试和优化&#xff0c;以提供更好的用户体验。在移动应用开发领域&#xff0c;iOS和Android是两个主要的操作系统平台。本文铁蛋讲给各位小伙伴们详细介绍在App测试中iOS和Android的差异&…...

编程日记 2024/1/9 3:09:47

每日算法打卡：数的三次方根 day 7

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例&#xff1a;输出样例&#xff1a; 题目分析示例代码 原题链接 790. 数的三次方根 题目难度&#xff1a;简单 题目描述 给定一个浮点数 n&#xff0c;求它的三次方根。 输入格式 共一行&#xff0c;包含一个浮…...

编程日记 2024/1/9 3:07:45

人机交互主板定制_基于MT8735安卓核心板的自助查询机方案

人机交互主板是一种商显智能终端主板&#xff0c;广泛应用于广告机、工控一体机、教学一体机、智能自助终端、考勤机、智能零售终端、O2O智能设备、取号机、计算机视觉、医疗健康设备、机器人设备等领域。 人机交互主板采用联发科MTK8735芯片平台&#xff0c;四核Cortex-A53架构…...

编程日记 2024/1/9 3:06:44

全志F1C100s Linux 系统编译出错：不能连接 github

环境 Ubuntu 20.04 LTS 64 位虚拟机 开发板：Lichee Pi Nano 源代码：GitHub - florpor/licheepi-nano 问题描述 该源码库使用了 git 子模块的概念，一个库中包含了 u-boot、Linux等代码库。不需要分别编译，一个 make 全搞定 编译时提示错误： >>> linux-hea…...

编程日记 2024/1/9 3:04:42

如何保障 MySQL 和 Redis 的数据一致性？

数据一致性问题是如何产生的&#xff1f; 数据一致性问题通常产生于数据在不同的时间点、地点或系统中存在多个副本的情况&#xff0c; 系统只存在一个副本的情况下也完全可能会产生。 设想一下&#xff0c;你在一家连锁咖啡店有一张会员卡这张会员卡可以绑定两个账号&#x…...

编程日记 2024/1/9 3:03:42

Leetcode 2999. Count the Number of Powerful Integers

Leetcode 2999. Count the Number of Powerful Integers 1. 解题思路2. 代码实现 题目链接&#xff1a;10034. Count the Number of Powerful Integers 1. 解题思路 这一题的话其实还是一个典型的求不大于 N N N的特殊数字个数的问题。 这道题本质上进行一下替换还是要求如…...

编程日记 2024/1/9 3:01:40

【Reading Notes】（2）

文章目录 FreestyleHip-hop dance and MusicProgrammerMaster Freestyle 都说人的成长有三个阶段&#xff0c;第一个阶段认为自己独一无二&#xff0c;天之骄子&#xff1b;第二个阶段发现自己原来如此渺小&#xff0c;如此普通&#xff0c;沮丧失望&#xff1b;第三阶段&#…...

编程日记 2024/1/9 3:00:39

【设计模式之美】SOLID 原则之一：怎么才算是单一原则、如何取舍单一原则

文章目录 一. 如何判断类的职责是否足够单一&#xff1f;二. 类的职责是否设计得越单一越好&#xff1f; 开始学习一些经典的设计原则&#xff0c;其中包括&#xff0c;SOLID、KISS、YAGNI、DRY、LOD 等。 本文主要学习单一职责原则的相关内容。 单一职责原则的定义&#xff1a…...

编程日记 2024/1/9 2:59:38

# [NOIP2015 普及组] 扫雷游戏#洛谷

题目背景 NOIP2015 普及组 T2 题目描述 扫雷游戏是一款十分经典的单机小游戏。在 n n n 行 m m m 列的雷区中有一些格子含有地雷&#xff08;称之为地雷格&#xff09;&#xff0c;其他格子不含地雷&#xff08;称之为非地雷格&#xff09;。玩家翻开一个非地雷格时&#…...

编程日记 2024/1/9 2:53:32

Unity中Shader的_Time精度问题

文章目录 前言一、U方向上优化二、V方向上优化在这里插入图片描述 三、最终代码1、效果2、Shader 前言 在Unity的Shader中&#xff0c;使用了_Time来达到UV的流动效果&#xff0c;普遍会出现一个问题。我们的UV值会随着时间一直增加&#xff08;uv值增加了&#xff0c;但是因为…...

编程日记 2024/1/9 2:52:31

听GPT 讲Rust源代码--compiler(15)

File: rust/compiler/rustc_arena/src/lib.rs 在Rust源代码中&#xff0c;rustc_arena/src/lib.rs文件定义了TypedArena&#xff0c;ArenaChunk&#xff0c;DroplessArena和Arena结构体&#xff0c;以及一些与内存分配和容器操作相关的函数。 cold_path<F: FnOnce,drop,new,…...

编程日记 2024/1/9 2:51:30

关键字联合体union的定义和使用

联合体的定义 联合体的定义和结构体相同。 联合体成员共用存储空间&#xff0c;联合体占用的空间最大长度的数据成员的长度。 union State {char sleep;char run;int suspend;double error; }state_u;以上例子&#xff0c;State表示联合体的名字&#xff0c;它相当于声明了一…...

编程日记 2024/1/9 2:47:27

基于GA-PSO遗传粒子群混合优化算法的VRPTW问题求解matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 遗传算法&#xff08;GA&#xff09;基本原理 4.2 粒子群优化&#xff08;PSO&#xff09;基本原理 4.3 算法优化策略 5.完整程序 1.程序功能描述 VRPTW是车辆路径问题&#xff08;VR…...

编程日记 2024/1/9 2:45:25

【leetcode100-033】【链表】排序链表

【题干】 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 【思路】 递归版归并法链表版&#xff5e;没什么特别好说的&#xff08;非递归版归并也是可以哒&#xff0c;但是马上要考试了今天懒得写了&#xff01;打个flag在这里也许哪天想起来…...

编程日记 2024/1/9 2:44:24

[Kubernetes]5. k8s集群StatefulSet详解,以及数据持久化（SC PV PVC）

前面通过deployment结合service来部署无状态的应用,下面来讲解通过satefulSet结合service来部署有状态的应用 一.StatefulSet详解 1.有状态和无状态区别 无状态： 无状态(stateless)、牲畜(cattle)、无名(nameless)、可丢弃(disposable) 有状态： 有状态(stateful)、宠物(pet)…...

编程日记 2024/1/9 2:43:23

数据库系统-甘晴void学习笔记

数据库系统笔记 计科210X 甘晴void 202108010XXX 教材&#xff1a;《数据库系统概论》第6版 &#xff08;图片来源于网络&#xff0c;侵删&#xff09; 文章目录 数据库系统<br>笔记第一篇 基础篇1 绪论1.1数据库系统概述1.2数据模型1.3数据库系统的结构(三级模式结构…...

编程日记 2024/1/9 2:41:21

Azure Machine Learning - 人脸识别任务概述与技术实战

Azure AI 人脸服务提供了可检测、识别和分析图像中的人脸的 AI 算法。 人脸识别软件在许多不同情形中都十分重要&#xff0c;例如识别、无接触访问控制和实现隐私的人脸模糊。你可以通过客户端库 SDK&#xff0c;或者直接调用 REST API 使用人脸服务。 目录 一、人脸识别服务场…...

编程日记 2024/1/9 2:35:17

强化学习的数学原理学习笔记 - 蒙特卡洛方法（Monte Carlo）

文章目录 概览&#xff1a;RL方法分类蒙特卡洛方法&#xff08;Monte Carlo&#xff0c;MC&#xff09;MC BasicMC Exploring Starts&#x1f7e6;MC ε-Greedy 本系列文章介绍强化学习基础知识与经典算法原理&#xff0c;大部分内容来自西湖大学赵世钰老师的强化学习的数学原理…...

编程日记 2024/1/9 2:34:16

DDIA 第十一章：流处理

本文是《数据密集型应用系统设计》&#xff08;DDIA&#xff09;的读书笔记&#xff0c;一共十二章&#xff0c;我已经全部阅读并且整理完毕。 采用一问一答的形式&#xff0c;并且用列表形式整理了原文。 笔记的内容大概是原文的 1/5 ~ 1/3&#xff0c;所以你如果没有很多时间…...

编程日记 2024/1/9 2:29:13

webpack知识点总结（高级应用篇）

除开公共基础配置之外&#xff0c;我们意识到两点: 1. 开发环境(modedevelopment),追求强大的开发功能和效率&#xff0c;配置各种方便开 发的功能;2. 生产环境(modeproduction),追求更小更轻量的bundle(即打包产物); 而所谓高级应用&#xff0c;实际上就是进行 Webpack 优化…...

编程日记 2024/1/9 2:28:12

均匀与准均匀 B样条算法

B 样条曲线的定义 p ( t ) ∑ i 0 n P i F i , k ( t ) p(t) \sum_{i0}{n} P_i F_{i, k}(t) p(t)i0∑​nPi​Fi,k​(t) 方程中 n 1 n1 n1 个控制点&#xff0c; P i P_i Pi​, i 0 , 1 , ⋯ n i0, 1, \cdots n i0,1,⋯n 要用到 n 1 n1 n1 个 k k k 次 B 样条基函数 …...

编程日记 2024/1/9 2:26:10

阿里巴巴网站建设与维护/无锡做网站的公司

写在前面 假设你明白清晰知道需求规格说明书是什么。则能够忽略此文章。假设你不清晰。建议还是阅读一下本文&#xff0c;不然或许早晚会碰钉子。转载请标明出处&#xff1a; http://blog.csdn.net/ouyida3/article/details/47683191 本文出自:【ouyida3的博客】 起因 近期在做…...

编程日记 2024/11/28 7:20:19

专业的家居行业网站开发/百度推广渠道户

公司配置一台4C4GB500GB的机器&#xff0c;内存小了点&#xff0c;为了加快当前项目的迭代速度&#xff0c;加装了一根8GB内存&#xff0c;反正放在家里也是闲着&#xff0c;物尽其用白。...

编程日记 2024/11/28 2:03:28

网站建设 秦皇岛公司/qq关键词排名优化

2019独角兽企业重金招聘Python工程师标准>>> 安装 pip install celery #pip install flower #celery的及时监控组件配置 默认celery的配置文件名是celeryconfig.py,本例的内容如下&#xff1a; BROKER_URL amqp://guest:guest[localhost](https://my.oschina.net/u…...

编程日记 2024/11/27 21:54:29

公关策划网站建设/河南seo和网络推广

接收中文乱码 EntityUtils.toString(entity,"UTF-8"); 请求中文乱码 StringEntity s new StringEntity(json.toString());s.setContentEncoding("UTF-8");...

编程日记 2024/11/27 20:50:56

苏州市住房和城乡建设局官方网站/爱采购seo

原文&#xff1a;http://coolketang.com/staticCoding/5a9925ad9f54542163e2e934.html 1. 下标是访问集合、列表、序列中的元素的快捷方式&#xff0c;结构体、枚举和类都可以定义下标。本节课将为你演示&#xff0c;如何给类设置下标。 2. 首先定义一个指定名称的类。 3. 然后…...

编程日记 2024/11/27 19:09:30

微网站怎么做百度关键词/百度搜索什么关键词能搜到网站

真没想到这个系列还能更新下去…之前本来就是想写个烟花写个黑白棋小程序图一乐的&#xff0c;结果搞个文化节活动找不着人来写js&#xff0c;只能自己上了&#xff0c;连熬三个大夜总算是把网上找的一千多行的开源代码理完、部分重构完了。 自认为无论是还原性还是交互都设计…...

编程日记 2024/11/27 16:42:24