布局---BFC（块级格式化上下文）详解

最新推荐文章于 2024-11-14 15:33:48 发布
最新推荐文章于 2024-11-14 15:33:48 发布
阅读量156 收藏
点赞数 1
分类专栏： CSS 前端体系知识---HTML与浏览器 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h18377528386/article/details/125868507
版权

1.定义

BFC：块格式化上下文（Block Formatting Context）

  • 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
     

2.如何使元素（盒子）变成BFC盒子

①html标签是BFC盒子

②浮动的元素也是BFC盒子

③行内块元素也是BFC盒子

④overflow属性值不为visivle。如auto、hidden

⑤.......

3.BFC盒子的特点

① BFC盒子会默认包裹住内部子元素(标准流、浮动)→应用:清除浮动

② BFC盒子本身与子元素之间不存在margin的塌陷现象→应用:解决margin的塌陷

③........
 

案例详解参考：

什么是BFC？看这一篇就够了_Leon_94的博客-CSDN博客_bfc 

Cirrod
关注
专栏目录
【CSS】块格式化上下文（BFC）：解决margin坍塌、高度塌陷、自适应布局等问题
来都来了，不再学会儿？
10-17 333
这里写目录标题1、css 定位机制：2、 BFC解决什么问题：3、 怎么触发BFC：4、 BFC - margin重合：5、 BFC - margin塌陷：6、 BFC - 高度塌陷：7、 BFC - 自适应布局： 1、css 定位机制： css 中的定位机制可分为三种： 1. 普通的文档流：block 块级元素单独一行 (span)，inline内联元素排成一排（div）。 2. 定位流：position 相当于新开一个层级。 absolute：绝对定位。从文档流中脱出，相对于其最接近的一个最有定位设置的
详解BFC：块级格式化上下文
icemwj的博客
10-06 2844
1、什么是BFC以及如何创建BFC （1）BFC 的概念： BFC（Block formatting context），即块级格式化上下文，它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。 在一个 Web 页面的 CSS 渲染中，块级格式化上下文 （Block Fromatting Context）是按照块级盒子布局的。 （2）W3C 对 BFC 的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks，table-cells 和
css：详解BFC块级格式化上下文
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-08 432
BFC（Block Formatting Context）块级格式化上下文一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。BFC 有点像元素的一个属性，是需要设置的，不是生来一个 div 放到那就拥有 BFC 功能设置了 BFC，这个元素就是一个独立的区域了好了，那我们接下来看看如何设置 BFC。
详解BFC块级格式化上下文
Optimistic的博客
07-22 273
在平常布局中都会遇到外边距合并、浮动元素覆盖等问题，这些都是触发了 bfc 的缘故 什么为 BFC BFC（Block Formatting Contexts ） 就是即块级格式化上下文。是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 BFC的特性 我们大家都知道bfc的特性： 1.内部的元素会在垂直方向，从顶部开始一个接一个地放置。 2.元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻 元素的margin会发生叠加 3.都是从最左边.
BFC(块级格式化上下文)的详解
weixin_46820017的博客
03-07 386
页面中的 -块渲染区域， 并且有 — 套属于自己的渲染规则内部的盒子会在垂直方向上一个接一个的放置对于同 一个BFC的俩个相邻的盒子的margin会发生重叠 ， 与方向无关每个元素的左外边距与包含块的左边界相接触 (从左到右) ， 即使浮动元素也是如此BFC的区域不会与float的元素区域重叠计算BFC的高度时 ， 浮动子元素也参与计算。
块级格式上下文（BFC）详解及应用
sinat_39592712的博客
01-18 552
BFC是什么 BFC（Block Formatting Context，块级格式上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 创建BFC的方式 根元素（<html>） 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的 display 为 inline-block） overflow 计算值（Computed）不
BFC是什么？BFC（块级格式化上下文）详解
weixin_55182699的博客
01-16 746
BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，那这句话到底是什么意思呢？我们用代码来说明 <div class="d1" id="BFC1"> <div class="d2"></div> <div class="d3"></div> <d
BFC（块级格式化上下文）详解
weixin_42281924的博客
12-09 286
1.什么是BFC BFC 全称为 块格式化上下文 (Block Formatting Context) 。 2.BFC有啥作用 1.使 BFC 内部浮动元素只在内部发挥作用，不会不会影响到外部 2.解决边距重叠问题（同时能清除浮动） 3.BFC的原理（BFC的渲染规则） 1.BFC元素垂直方向的边距会发生重叠 2.BFC的区域不会与浮动元素的box重叠，可以包含浮动元素（用来清除浮动） 3.BFC...
块级格式化上下文（BFC）详解
m0_37566921的博客
07-12 106
BFC所具有的特性： 在bfc中，内部的盒子会在垂直方向，一个接一个的排列； 在bfc中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）； 盒子垂直方向的距离由margin决定，属于同一个bfc的两个相邻盒子的margin会发生重叠； bfc的区域不会与浮动盒子产生交集，而是紧贴浮动边缘； bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的 计算bfc高度的时候
CSS三栏布局6法：浮动与BFC策略详解
- 利用BFC（块级格式化上下文）原理，可以通过设置`.main`元素的样式使其成为一个独立的BFC。这样，中间栏不会受到左右浮动元素的影响，并且能正常地占据剩余空间。 - 要创建BFC，可以尝试使用`display: inline-...
css布局之BFC模式（block formatting context）
01-19
官方给出的BFC解释是这样的，浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级...
JS 层叠级别&层叠上下文&BFC&包含块详解 学习笔记
qq_44999678的博客
09-18 1014
BFC&IFC 其实在我们使用CSS的时候，有一些重要的概念是值得我们关注的，比如说我们讲的BFC和IFC，这些都是我们需要掌握的重点知识。接下来我来分享一下我在学习BFC/IFC时的理解和心得。如有错误望大家指正！谢谢。 首先我们来了解一些重要概念。 一，包含块： 我们创建了一个块级元素，其实当我们为其添加某些属性的时候，我们有时候会有一点顾及，有时候我们需要要知道它的父级元素的相关信息。假如子元素的位置和尺寸的大小需要通过父元素来决定(比如百分比)。那么我们就称父元素是一个包含块。一个元素的大小
前端面试必知：CSS盒模型、BFC与层叠上下文详解
2. **BFC（块级格式化上下文）**： BFC是一个独立的渲染区域，有助于控制元素间的间距和布局。它有以下特点： - IE下通过设置`zoom:1`可触发BFC。 - 触发条件包括根元素、绝对定位、`inline-block`、`table`、...
前端 Flex 布局语法详解
ning的博客
11-10 1122
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 488
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端（1）——快速入门HTML
最新发布
m0_63086198的博客
11-14 552
参考： W3school 1. HTML 我使用的是vs code，在使用之前，先安装以下几个插件： Auto Rename Tage HTML CSS Support Live Server 1.1 HTML标签 HTML全称是Hypertext Markup Language(超文本标记语言) HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML,标签是由尖括号包围的关键 字。 标签通常成对出现，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如
Vue中的常用指令
m0_62388400的博客
11-12 1135
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
后端一次性返回数据，前端分页
qq_39307266的博客
11-14 157
vue 结合elementUI 分页组件，后端一次性返回数据，前端做分页。1.template中。js从后端获取总数据。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
狼堡灰太狼的博客
11-11 973
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cirrod

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值