浅析BFC

最新推荐文章于 2024-08-06 10:39:23 发布
最新推荐文章于 2024-08-06 10:39:23 发布
阅读量215 收藏 4
点赞数 2
分类专栏： 前端知识汇总 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsy0827/article/details/135860188
版权

浅析BFC

1. 定义

BFC全称Block Formatting Context，块级格式化上下文。

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。

2. 如何创建

（几个常用）

  • <html> 文档的根元素
  • float 浮动不为none
  • position: absolute; position: fixed;
  • display:flex; display: inline-flex; display: inline-block;
  • overflow: hidden; overflow: auto; overflow: scroll;

3. 作用

① 解决外边距塌陷

在这里插入图片描述
在这里插入图片描述

② 解决包含塌陷（解决子级元素外边距会使父级元素塌陷的问题）

在这里插入图片描述
在这里插入图片描述

③ 解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题

在这里插入图片描述
在这里插入图片描述

④ 阻止标准流元素被浮动元素覆盖

在这里插入图片描述
在这里插入图片描述

舍予一
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析 BFC
happyCoding1024的博客
04-21 441
文章目录浅析 BFCBFC 的原理是什么（BFC 的渲染规则）如何创建 BFCBFC 规则验证及应用规则一 BFC 区域内的元素外边距会发生重叠规则二 BFC 区域的元素不会与外部的浮动元素重叠规则三 计算 BFC 区域的高度时，浮动元素也参与计算（应用：清除浮动）规则四 BFC 区域就相当于一个容器，内部的元素不会影响到外部，同样外部的元素也不会影响到内部（应用：消除边距重叠）规则五 BFC 区...
浅析BFC原理及作用
想搞全栈的前端
06-17 233
什么是BFC 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 怎么创建BFC 下列方式会创建块格式化上下文： 上面太多了不太好记，主要可以记住以下四种： body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absol...
浅析BFC及其作用
EmotionComputer
03-09 145
浅析BFC及其作用 转自https://blog.csdn.net/riddle1981/article/details/52126522 一、什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何...
浅析BFC与外边距折叠关系
qq_43288404的博客
09-26 305
浅析BFC和外边距折叠 一:BFC (1)什么是BFC呢？ 1.BFC：块级格式化上下文（Block Formatting Content）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 2.在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子...
浅析BFC外边距穿透
qq_43289582的博客
09-26 111
1.BFC的概念 BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用float和margin布局元素。 2.BFC布局规则 1.内部的Box会在垂直方向，一个接一个地放置。 2.Box...
【转】浅析BFC及其作用
weixin_30537391的博客
08-27 85
1. 什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。中文译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会...
BFC浅析
lulula的博客
10-31 261
BFC到底使什么？ BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。 BFC布局规则 关于这些不同 box，下文会解释，别慌~ 内部的Box（Block-level box）会在垂直方向，一个接一个地放置。 内部的Box（Block-level box）垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box（Block-leve...
浅析BFC布局的概念以及作用
08-16 154
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=ib1cjib&title=%E6%B5%85%E6%9E%90BFC%E5%B8%83%E5%B1%80%E7%9A%84%E6%A6%82%E5%BF%B5%E4%BB%A5%...
CSS之BFC浅析
Bennett_G博客
02-14 455
CSS之BFC浅析前言一、BFC是什么？二、产生BFC的条件三、BFC的约束规则结语 前言 无意间看到一个web前端面试场景，面试官询问你了解BFC吗？ 此时我懵了，转职前端也一年有余了，BFC第一次听说，真是羞愧呀???????????? 所以本着知耻而后学的????，特意去查找了一番资料，学习学习???????????? 提示：以下是本篇文章正文内容，仅供大学一起参考学习 一、BFC是什么？ BFC (Block Formatting Context):块格式化上下文，是用于布局块级盒子的一块独
浅析CSS里的BFC和IFC的用法
09-24
主要介绍了浅析CSS里的BFC和IFC的用法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML-bfc初探
08-03
理解BFC可以帮助我们更好地控制网页的布局，解决浮动元素引起的问题，以及实现更精确的定位。 1. **什么是BFC**： BFC是一个独立的渲染区域，每个元素都会创建自己的BFC，内部的元素会按照一定的规则进行排列，...
BFC实现自适应两栏布局
01-20
**BFC（Block Formatting Contexts）** 是CSS布局中的一个重要概念，它定义了块级元素如何在其内部和周围元素交互。BFC可以帮助我们解决许多布局问题，比如**高度塌陷**，并能实现如自适应两栏布局等复杂的布局模式...
bfc的详细介绍以及大总结
01-17
### BFC（Block Formatting Context）的详细介绍与大总结 #### 一、BFC的基本概念 BFC，全称为Block Formatting Context（块级格式化上下文），是CSS中一种特殊的渲染规则，它决定了内部元素如何布局以及与其他...
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 287
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 531
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
小程序支付（前端）
weixin_43993121的博客
08-05 156
【代码】小程序支付（前端）
前端面试宝典【CSS篇】【4】
最新发布
BDawn的专栏
08-06 114
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2845
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
深入理解CSS BFC与层叠原理，掌握!important的应用
- **行内元素转换**：非BFC内的行内元素会正常流到BFC外部，而BFC内的行内元素则保持在内部。 - **边距合并**：BFC内外的外边距不会折叠，除非它们之间有浮动或 clearance。 **2. CSS层叠和继承规则**： - **层叠...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值