什么是BFC?它有什么作用?如何创建BFC?
聚沙成塔·每天进步一点点
- ⭐ 专栏简介
- ⭐ 什么是BFC
- ⭐ BFC的作用
- ⭐ 创建BFC的方法
- ⭐ 写在最后
⭐ 专栏简介
前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中,我们将以问答形式每天更新,为大家呈现精选的前端知识点和常见问题解答。通过问答形式,我们希望能够更直接地回应读者们对于前端技术方面的疑问,并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具,我们将深入浅出地解释概念,并提供实际案例和练习来巩固所学内容。同时,我们也会分享一些实用技巧和最佳实践,帮助你更好地理解并运用前端开发中的各种技术。

不仅如此,我们还会定期推出一些项目实战教程,让你能够将所学知识应用到实际开发中。通过实际项目的练习,你将能够更好地理解前端开发的工作流程和方法论,并培养自己解决问题和独立开发的能力。我们相信,只有不断积累和实践,才能真正掌握前端开发技术。因此,请准备好迎接挑战,勇敢地踏上这段前端入门之旅!无论你是寻找职业转型、提升技能还是满足个人兴趣,我们都将全力以赴,为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧!加入前端入门之旅,成为一名出色的前端开发者! 让我们启航前端之旅
⭐ 什么是BFC
块级格式化上下文(Block Formatting Context,简称BFC)是CSS中的一个重要概念,用于描述一个独立的块级渲染区域,其中的元素按照一定的规则进行布局和渲染。BFC具有一些特性,它可以影响包含和包含的元素,对页面布局和元素交互产生重要影响。
BFC的主要作用是在页面上创建一个隔离的环境,使得其中的元素在布局时受到限制,不受外部的影响。这可以解决一些常见的布局问题,以及清除浮动、避免边距重叠等问题。
⭐ BFC的作用
-
浮动元素的包裹:当一个元素包含浮动元素时,它会形成一个BFC,使其能够正确包裹浮动元素,而不会发生高度塌陷问题。
-
边距折叠的阻止:在同一个BFC中的相邻块级元素的上下边距会发生折叠(合并)。但是,不同BFC之间的元素的边距不会折叠,这可以避免不希望的边距行为。
-
清除浮动:在BFC中的浮动元素不会影响外部元素的布局,这意味着可以通过创建一个BFC来清除浮动,避免父元素高度塌陷。
-
自适应两栏布局:通过将一个容器元素设置为BFC,可以创建自适应的两栏布局,其中一栏可以浮动,而另一栏会自动填充剩余宽度。
-
避免文字环绕:通过创建BFC,可以避免文本围绕浮动元素的问题,使得文本可以在元素的周围流动。
⭐ 创建BFC的方法
-
使用
overflow属性:将元素的overflow属性设置为auto、hidden或scroll,可以创建一个BFC。 -
使用
float属性:设置元素的float属性为left或right会创建一个BFC。 -
使用
position属性:将元素的position属性设置为absolute或fixed会创建一个BFC。 -
使用
display属性:将元素的display属性设置为inline-block、table-cell、table-caption或flex会创建一个BFC。
综合来说,BFC是一种非常有用的概念,它可以帮助开发者更好地控制元素的布局、避免布局问题,并提供更灵活的页面布局方式。
⭐ 写在最后
本专栏适用读者比较广泛,适用于前端初学者;或者没有学过前端对前端有兴趣的伙伴,亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点,所以如果你具备了前端的基础跟着本专栏学习,也是可以很大程度帮助你查漏补缺,由于博主本人是自己再做内容输出,如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我,我们一起进步,与此同时也推荐大家几份专栏,有兴趣的伙伴可以订阅一下:除了下方的专栏外大家也可以到我的主页能看到其他的专栏;
前端小游戏(免费)这份专栏将带你进入一个充满创意和乐趣的世界,通过利用HTML、CSS和JavaScript的基础知识,我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验,这个专栏都适合你。我们会从最基础的知识开始,循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习,你将学会如何运用HTML来构建页面结构,使用CSS来美化游戏界面,并利用JavaScript为游戏添加交互和动态效果。在这个专栏中,我们将涵盖各种类型的小游戏,包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程,并提供详细解释和代码示例。同时,我们也会分享一些优化技巧和最佳实践,帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能,还是对页面游戏开发感兴趣,前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

Vue3通透教程【从零到一】(付费) 欢迎来到Vue3通透教程!这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

TypeScript入门指南(免费) 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码,我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者,都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成,我们将全面覆盖各个方面。通过阅读本专栏,您将能够提升JavaScript代码的可靠性和可维护性,并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧!点击订阅TypeScript入门指南专栏

相关文章:
什么是BFC?它有什么作用?如何创建BFC?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是BFC⭐ BFC的作用⭐ 创建BFC的方法⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web…...
svn文章四:版本控制策略 - 穿越时光机:SVN版本控制进阶技巧
文章四:版本控制策略 - “穿越时光机:SVN版本控制进阶技巧” 概述:版本控制是SVN的核心功能。本文将深入研究SVN版本控制的进阶技巧,包括标签管理、历史查看、版本回退等,让您成为版本控制的高手。 1. 引言 版本控制…...
SpringBoot+Mybatis-Plus实现增删改查超详细步骤
目录 一、介绍 二、前期准备工作 (一) 创建springboot项目和创建数据库 三、项目配置 (一)pom.xl导入相关依赖 1.导入依赖 (二)yml文件中配置连接数据库 2.配置yml文件 四、代码的编写 数据库展…...
Qt应用开发(基础篇)——拆分器窗口 QSplitter QSplitterHandle
一、前言 QSplitter继承于QFrame,QFrame继承于QWidget,是Qt的一个部件容器工具类。 框架类QFrame介绍 QSplitter拆分器,用户通过拖动子部件之间的边界来控制子部件的大小,在应用开发中数据分模块展示、图片展示等场景下使用。 二、…...
屏幕尺寸单位 px、em、rem区别
1、px是屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽、比例有可能会不同。假设:1号显示器上1px宽1毫米,但2号显示器1px宽两毫米,那么定义一个div宽度为100px,1号显示器上…...
yo!这里是STL::list类简单模拟实现
目录 前言 重要接口实现 框架 默认成员函数 迭代器(重点) 1.引言 2.list迭代器类实现 3.list类中调用实现 增删查改 后记 前言 我们知道,stl中的vector对应数据结构中的顺序表,string类对应字符串,而今天要…...
小程序商城开发制作
当开发一个商城小程序时,费用是一个非常重要的考虑因素。然而,准确回答这个问题是有一定困难的,因为开发商城小程序的费用取决于多个因素。以下是一些可能影响价格的主要因素: 1. 功能需求:商城小程序的复杂程度和功能…...
并发编程面试题2
并发编程面试题2 一、AQS高频问题: 1.1 AQS是什么? AQS就是一个抽象队列同步器,abstract queued sychronizer,本质就是一个抽象类。 AQS中有一个核心属性state,其次还有一个双向链表以及一个单项链表。 首先state…...
关于eclipse导入部署具有增删改查的项目
目录 前言:当我们刚刚进入公司的第一步就是去部署当前公司的项目,本博客就是详细介绍怎么去部署当前公司的项目。 一,开发工具: 二,具体步骤: 2.1导入公司的项目 打开eclipse开发工具 2.2配置当前的环…...
c++日志工具之——log4cpp
1、log4cpp概述 Log4cpp是一个开源的C类库,它提供了C程序中使用日志和跟踪调试的功能,它的优点如下: 提供应用程序运行上下文,方便跟踪调试; 可扩展的、多种方式记录日志,包括命令行、文件、回卷文件、内…...
ES索引重建reindex详解
目录 一、使用场景 二、reindex介绍 三、使用手册 1、覆盖更新 2、创建丢失的文档并更新旧版本的文档 3、仅创建丢失的文档 4、冲突处理 5、source中添加查询条件 6、source中包含多个源索引 7、限制处理的记录数 8、从远程ES集群中重建索引 9、提取随机子集 10、…...
前沿分享-中距离射频取电
目前来看,微能源有四种技术路线,一是环境光采集、温差转换采集、无线射频采集和振动能量采集。 无线射频微能源是在通信设备通信过程中自然产生的,可以通过射频能量芯片实现无线射频取电,能瞬间大功率储电和安全驱动负载。 通过射…...
UnrealEngine - 网络同步之连接篇
1 连接过程 - 握手 传统的 C/S 架构下,Client 和 Server 通常会建立一条抽象的 Connection,用来进行两端的通信。 UE 的官方文档中提供了 Client 连接到 Server 的示例 ,简单来说分为如下几步: 打包构建好 Client 和 Server 进程…...
【JDBC系列】- 扩展提升学习
扩展提升学习 😄生命不息,写作不止 🔥 继续踏上学习之路,学之分享笔记 👊 总有一天我也能像各位大佬一样 🏆 博客首页 怒放吧德德 To记录领地 🌝分享学习心得,欢迎指正࿰…...
阻塞和非阻塞,同步和异步
文章目录 典型的一次IO的两个阶段IO多路复用是同步还是异步? 典型的一次IO的两个阶段 数据就绪和数据读写 同步:需要应用程序自己操作 IO多路复用是同步还是异步? epoll也是同步的 具体数据读取还是通过应用程序自己完成的 只有使用了特…...
提速Rust编译器!
Nethercote是一位研究Rust编译器的软件工程师。最近,他正在探索如何提升Rust编译器的性能,在他的博客文章中介绍了Rust编译器是如何将代码分割成代码生成单元(CGU)的以及rustc的性能加速。 他解释了不同数量和大小的CGU之间的权衡…...
QT创建项目
可选择CMake或qmake...
基于vue3+webpack5+qiankun实现微前端
一 主应用改造(又称基座改造) 1 在主应用中安装qiankun(npm i qiankun -S) 2 在src下新建micro-app.js文件,用于存放所有子应用。 const microApps [// 当匹配到activeRule 的时候,请求获取entry资源,渲染到containe…...
华为OD真题--完美走位--带答案
2023华为OD统一考试(AB卷)题库清单-带答案(持续更新)or2023年华为OD真题机考题库大全-带答案(持续更新) 题目描述 输入一个长度为4的倍数的字符串Q,字符串中仅包含WASD四个字母。 将这个字符串中的连续子串…...
【AI】《动手学-深度学习-PyTorch版》笔记(十四):多层感知机
AI学习目录汇总 1、多层感知机网络结构 1.1 线性模型:softmax回归 在前面介绍过,使用softmax回归来处理分类问题时,每个输出通过都一个仿射函数计算,网络结构如下,输入和输出之间为全链接层: 1.2 多层感知机 多层感知机就是在输入和输出中间再添加一个或多个全链接…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
