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

BFC的概念与作用

本篇详细介绍FC的概念,以及BFC的作用:

  • FC的全称是Formatting Context,元素在标准流里面都是属于一个FC的.

  • 块级元素的布局属于Block Formatting ContextBFC

-也就是block level box都是在BFC中布局的;

  • 行内级元素的布局属于Inline Formatting ContextIFC

-而inline level box都是在IFC中布局的;

哪些具体的情况下会创建BFC?

 根元素(HTML)

 浮动元素(元素的 float 不是 none)

 绝对定位元素(元素的 position 为 absolute 或 fixed)

 行内块元素(元素的 display 为 inline-block)

 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值),表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)

 匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、 row、tbody、thead、tfoot 的默认属性)或 inline-table)

 overflow 计算值(Computed)不为 visible 的块元素

 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)

 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)

 display 值为 flow-root 的元素

BFC的作用?

  • 在BFC中,box会在垂直方向上一个挨着一个的排布;

  • 垂直方向的间距由margin属性决定;

  • 在同一个BFC中,相邻两个box之间的垂直方向的margin会折叠(collapse);

  • 在BFC中,每个元素的左边缘是紧挨着包含块的左边缘的;

<style>
.box1{height: 100px;width: 100px;margin: 20px;background-color: #73b1ce;
}
.box2{height: 100px;width: 100px;margin: 10px;background-color: #a473ce;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

box1和box2垂直方向上的margin会合并,最终的margin值会取两个margin中的较大值。在此例中,box1和box2垂直方向之间的距离为20px。

BFC的特性可以解决什么问题呢?

  • 解决margin的折叠问题;

  • 解决浮动高度塌陷问题;

BFC的作用一:解决折叠问题

那么如果我们让两个box是不同的BFC呢?那么就可以解决折叠问题。

.box1 {height: 200px;width: 400px;background-color: orange;margin-bottom: 30px;
}.box2 {height: 150px;background-color: purple;margin-top: 50px;
}<div class="container"><div class="box1"></div>
</div>
<div class="box2"></div>

box1属于HTML的BFC,box2属于container的BFC,不属于同一个BFC,margin不会折叠

BFC的作用二:解决浮动高度塌陷

事实上,BFC解决高度塌陷需要满足两个条件:

  • 浮动元素的父元素触发BFC,形成独立的块级格式化上下文(Block Formatting Context);

  • 浮动元素的父元素的高度是auto的;

BFC的高度是auto的情况下,是如下方法计算高度的

  • 1.如果只有inline-level,是行高的顶部和底部的距离;

  • 2.如果有block-level,是由最顶层的块上边缘(margin-top)和最底层块盒子的下边缘(margin-bottom)之间的距离

  • 3.如果有绝对定位元素,将被忽略(不计算高度);

  • 4.如果有浮动元素,那么会增加高度以包括这些浮动元素的下边缘

因此,将浮动元素的父元素触发BFC,其会增加高度以包括浮动元素的底部,达到解决父元素高度塌陷的问题。

但是,这种方式不能解决绝对定位元素的父元素塌陷问题

相关文章:

BFC的概念与作用

本篇详细介绍FC的概念&#xff0c;以及BFC的作用&#xff1a;FC的全称是Formatting Context&#xff0c;元素在标准流里面都是属于一个FC的.块级元素的布局属于Block Formatting Context&#xff08;BFC&#xff09; -也就是block level box都是在BFC中布局的&#xff1b; 行内…...

谷歌留痕代发技术指南_谷歌留痕怎么霸屏的?

本文主要分享谷歌留痕技术的一些常见问题&#xff0c;霸屏的原理是什么。 本文由光算创作&#xff0c;有可能会被修改和剽窃&#xff0c;我们佛系对待这种行为吧。 谷歌留痕也叫谷歌搜索留痕&#xff0c;那么谷歌搜索留痕的霸屏原理是什么&#xff1f; 答案是&#xff1a;利…...

SCG failure information

我们知道5G网络有独立组网和非独立组网&#xff0c;独立组网中不论是核心网还是接入网都是5G&#xff0c;但是部署成本高&#xff1b;非独立组网也就是双连接(MRDC)也是目前比较流行的一种方式&#xff0c;其中的ENDC&#xff0c;即E-UTRA-NRDual Connectivity&#xff0c;是将…...

Idea修改Git账号及密码的方法

IDEA修改git账号及密码的方法&#xff1a;1、file->settings->passwords2、重启IDEA3、执行一次提交或更新当执行提交或更新之后&#xff0c;idea会自动提示输入账号、密码&#xff0c;如下&#xff1a;4、以上如果还修改不了&#xff0c;请尝试如下方式解决办法&#xf…...

leaflet 设置右键菜单,配置相应的功能(090)

第090个 点击查看专栏目录 本示例的目的是介绍如何在vue+leaflet中设置右键菜单,配置相应的功能。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码(共109行)安装插件相关API参考:专栏目标示例效果 配置方式 1)…...

怎么维护Linux VPS 服务器?简单7个步骤

维护VPS的目的是为了确保服务器网络始终畅通无阻。请注意&#xff0c;此列表中的任务并不是服务器维护所需完成的唯一任务。以下是 Linux VPS 服务器所有者可以做些什么来维护他们的服务器。 1.监控磁盘空间 服务器是个人服务器还是具有多个用户帐户的服务器并不重要&#xff0…...

[NOIP1999 提高组] 旅行家的预算(C++,贪心)

题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市&#xff08;假设出发时油箱是空的&#xff09;。给定两个城市之间的距离 D1D_1D1​、汽车油箱的容量 CCC&#xff08;以升为单位&#xff09;、每升汽油能行驶的距离 D2D_2D2​、出发点每升汽油价格PPP和沿途…...

Array.apply(null,{length: 99}) 逻辑解析

一、基础概述 vue 教程中有一段 demo code&#xff0c;如下&#xff1a; render: function (createElement) {return createElement(div,Array.apply(null, { length: 20 }).map(function () {return createElement(p, hi)})) }这个表达式Array.apply(null, { length: 20 })有…...

Web前端开发常用工具推荐(内含学前端必备软件资源)

1、Vim Vim作为一个类似于Vi的文本编辑器&#xff0c;功能强大的同时还可以做到高度可定制。当然了&#xff0c;虽然Vim类似Vi&#xff0c;但是它在Vi的基础上改进和增加了很多特性&#xff0c;VIM是纯粹的自由软件。即使Vim的学习成本高&#xff0c;但只要我们掌握很多的快捷…...

【python】考前复习,python基础语法知识点整理

文章目录1.常量与表达式2.变量和数据类型创建变量数据类型动态类型数据类型的转换3.注释4.字符串字符串的定义方式字符串的拼接字符串的格式化①字符串格式化的精度控制字符串的格式化②对表达式进行格式化5.从控制台输入(input)6.运算符算术运算符赋值运算符布尔类型和比较运算…...

3个月,入门网络安全并找到工作

在我进入大学之前&#xff0c;我一直对计算机感兴趣。虽然只是考了一个一般大学&#xff0c;但是选专业的时候还是选了计算机专业。 本来以为自己会在大学里学到很多有用的知识&#xff0c;并且能够很快找到一份好工作。但是&#xff0c;事实并不是这样。在大学期间&#xff0c…...

你会用 TypeScript 的条件类型吗?

我们可以使用 TypeScript 中的条件类型来根据逻辑定义某些类型&#xff0c;就像是在编写代码那样。它采用的语法和我们在 JavaScript 中熟悉的三元运算符很像&#xff1a;condition ? ifConditionTrue : ifConditionFalse。我们来看看他是怎么工作的。 TypeScript 的条件类型…...

云原生丨一文教你基于Debezium与Kafka构建数据同步迁移(建议收藏)

文章目录前言一、安装部署Debezium架构部署示意图安装部署二、数据迁移Postgres迁移到PostgresMySQL迁移到PostgresSQL前言 在项目中&#xff0c;我们遇到已有数据库现存有大量数据&#xff0c;但需要将全部现存数据同步迁移到新的数据库中&#xff0c;我们应该如何处理呢&…...

顶象APP加固的“蜜罐”技术有什么作用

目录 蜜罐有很多应用模式 蜜罐技术让App加固攻守兼备 顶象端加固的三大功能 为了捕获猎物&#xff0c;猎人会在设置鲜活的诱饵。被诱惑的猎物去吃诱饵时&#xff0c;就会坠入猎人布置好的陷阱&#xff0c;然后被猎人擒获&#xff0c;这是狩猎中常用的一种手段。在业务安全防…...

训练一个ChatGPT需要多少数据?

“风很大”的ChatGPT正在席卷全球。作为OpenAI在去年底才刚刚推出的机器人对话模型&#xff0c;ChatGPT在内容创作、客服机器人、游戏、社交等领域的落地应用正在被广泛看好。这也为与之相关的算力、数据标注、自然语言处理等技术开发带来了新的动力。自OpenAI发布ChatGPT以来&…...

【GlobalMapper精品教程】053:打开dbf文件并生成有坐标系的shp数据

本文讲解在globalmapper汇总打开dbf文件并生成有坐标系的shp数据。 文章目录一、dbf文件解读二、打开dbf文件二、另存为shp文件一、dbf文件解读 我们可以通过Excel或FME等多种软件查看dbf的结构&#xff0c;字段有&#xff1a;Name&#xff0c;kind&#xff0c;Lat&#xff0c…...

图像亮度调整

非线性方式 调整图像的方法有很多&#xff0c;最常用的方法就是对图像像素点的R、G、B三个分量同时进行增加&#xff08;减少&#xff09;某个值&#xff0c;达到调整亮度的目的。即改变图像的亮度&#xff0c;实际就是对像素点的各颜色分量值做一个平移。这种方法属于非线性的…...

精简版SDL落地实践

一、前言一般安全都属于运维部下面&#xff0c;和上家公司的运维总监聊过几次一些日常安全工作能不能融入到DevOps中&#xff0c;没多久因为各种原因离职。18年入职5月一家第三方支付公司&#xff0c;前半年在各种检查中度过&#xff0c;监管形势严峻加上大领导对安全的重视(主…...

第一回:Matplotlib初相识

一、认识matplotlib Matplotlib是一个Python 2D绘图库&#xff0c;能够以多种硬拷贝格式和跨平台的交互式环境生成出版物质量的图形&#xff0c;用来绘制各种静态&#xff0c;动态&#xff0c;交互式的图表。 Matplotlib可用于Python脚本&#xff0c;Python和IPython Shell、…...

怎么找回电脑删除的图片

怎么找回电脑删除的图片?图片作为一种非常简单方便的文件&#xff0c;经常被用来辅助我们的日常工作和学习。但在我们整理电脑时&#xff0c;如果我们不小心手一抖就删除了一些重要的图片&#xff0c;遇到这种事我们要如何才能恢复呢? 众所周知&#xff0c;简单的删除并不会完…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

《Offer来了:Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...