块级上下文格式（Block Formatting Context，BFC）

2024-02-21 15:12
文章标签 格式 block context 上下文 块级 bfc formatting

本文主要是介绍块级上下文格式（Block Formatting Context，BFC），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概念

        块级上下文格式（BFC）是 CSS 中的一个概念，用来描述块级盒子在页面布局中的行为。一个块级上下文格式（BFC）是一个独立的渲染区域，其中的元素布局受到这个上下文中的其他元素的影响，而不受外部元素的影响。

创建 BFC 的情况

  1. 根元素或包含根元素的元素（例如：<html>）。
  2. 浮动元素（元素的 float 不是 none）。
  3. 绝对定位元素（元素的 position 是 absolute 或 fixed）。
  4. 行内块元素（元素的 display 是 inline-block）。

  5. 表格单元格（元素的 display 是 table-cell）。

  6. 表格标题（元素的 display 是 table-caption）。
  7. 包含浮动元素的元素（元素的 overflow 不是 visible）。

BFC 的作用

  1. 清除浮动：当父元素包含浮动元素时，可以通过创建 BFC 来清除浮动，避免父元素塌陷，常用的方法是给父元素设置overflow:hidden。
  2. 防止外边距合并：当相邻块级元素的外边距发生合并时，可以将其中一个元素放入 BFC 中，从而避免外边距合并。
  3. 创建自适应的两栏布局：通过创建 BFC 可以实现两栏布局中一个固定宽度，一个自适应宽度的效果。
  4. 避免元素被浮动元素覆盖：当一个元素被浮动元素覆盖时，可以将该元素放入 BFC 中，使其避免被浮动元素覆盖。

这篇关于块级上下文格式（Block Formatting Context，BFC）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/732208。

相关文章

easyui同时验证账户格式和ajax是否存在

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法（字母开头，允许4-16字节，允许字母数字下划线）';return fal
阅读更多...
[数据集][目标检测]血细胞检测数据集VOC+YOLO格式2757张4类别

[数据集][目标检测]血细胞检测数据集VOC+YOLO格式2757张4类别

数据集格式：Pascal VOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：2757 标注数量(xml文件个数)：2757 标注数量(txt文件个数)：2757 标注类别数：4 标注类别名称:["Platelets","RBC","WBC","sickle cell"] 每个类别标注的框数：
阅读更多...
一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明： 首次发表日期：2024-09-08PlantUML官网： https://plantuml.com/zh/PlantUML命令行文档： https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi
阅读更多...
【Python知识宝库】上下文管理器与with语句：资源管理的优雅方式

【Python知识宝库】上下文管理器与with语句：资源管理的优雅方式

🎬 鸽芷咕：个人主页  🔥 个人专栏: 《C++干货基地》《粉丝福利》 ⛺️生活的理想，就是为了理想的生活! 文章目录 前言一、什么是上下文管理器？二、上下文管理器的实现三、使用内置上下文管理器四、使用`contextlib`模块五、总结 前言 在Python编程中，资源管理是一个重要的主题，尤其是在处理文件、网络连接和数据库
阅读更多...
js私有作用域(function(){})(); 模仿块级作用域

js私有作用域(function(){})(); 模仿块级作用域

摘自：http://outofmemory.cn/wr/?u=http%3A%2F%2Fwww.phpvar.com%2Farchives%2F3033.html js没有块级作用域，简单的例子： for(var i=0;i<10;i++){alert(i);}alert(i); for循环后的i，在其它语言像c、java中，会在for结束后被销毁，但js在后续的操作中仍然能访
阅读更多...
71-java 导致线程上下文切换的原因

71-java 导致线程上下文切换的原因

Java中导致线程上下文切换的原因通常包括： 线程时间片用完：当前线程的时间片用完，操作系统将其暂停，并切换到另一个线程。 线程被优先级更高的线程抢占：操作系统根据线程优先级决定运行哪个线程。 线程进入等待状态：如线程执行了sleep()，wait()，join()等操作，使线程进入等待状态或阻塞状态，释放CPU。 线程占用CPU时间过长：如果线程执行了大量的I/O操作，而不是CPU计算
阅读更多...
[Linux Kernel Block Layer第一篇] block layer架构设计

[Linux Kernel Block Layer第一篇] block layer架构设计

目录 1. single queue架构 2. multi-queue架构（blk-mq)  3. 问题 随着SSD快速存储设备的发展，内核社区越发发现，存储的性能瓶颈从硬件存储设备转移到了内核block layer，主要因为当时的内核block layer是single hw queue的架构，导致cpu锁竞争问题严重，本文先提纲挈领的介绍内核block layer的架构演进，然
阅读更多...
YOLOv8改进实战 | 注意力篇 | 引入CVPR2024 PKINet 上下文锚点注意力CAAttention

YOLOv8改进实战 | 注意力篇 | 引入CVPR2024 PKINet 上下文锚点注意力CAAttention

YOLOv8专栏导航：点击此处跳转 前言 YOLOv8 是由 YOLOv5 的发布者 Ultralytics 发布的最新版本的 YOLO。它可用于对象检测、分割、分类任务以及大型数据集的学习，并且可以在包括 CPU 和 GPU 在内的各种硬件上执行。 YOLOv8 是一种尖端的、最先进的 (SOTA) 模型，它建立在以前成功的 YOLO 版本的基础上，并引入了新的功能和改进，以
阅读更多...
单精度浮点数按存储格式转为整数的程序

单精度浮点数按存储格式转为整数的程序

///#include<cstdio>//-----------------union int_char{unsigned char ch[4];float i;};void out_put(union int_char x)//x86是小端对其模式，即最数据的最低位存储在地址的最低位上。{printf("单精度浮点数值为：%f\n",x.i,x.i);printf("存储位置从左到右
阅读更多...
[数据集][目标检测]智慧农业草莓叶子病虫害检测数据集VOC+YOLO格式4040张9类别

[数据集][目标检测]智慧农业草莓叶子病虫害检测数据集VOC+YOLO格式4040张9类别

数据集格式：Pascal VOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：4040 标注数量(xml文件个数)：4040 标注数量(txt文件个数)：4040 标注类别数：9 标注类别名称:["acalcerosis","fertilizer","flower","fruit","grey
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2