快乐的bfc

憨憨的小火锅

已于 2022-07-26 14:07:03 修改

阅读量105

点赞数

文章标签： css

于 2022-07-25 14:53:59 首次发布

本文链接：https://blog.csdn.net/ZHOUshi19990605/article/details/125974373

版权

一、bfc是什么

是Block Formatting Context的缩写，翻译过来就是块级格式化上下文，并且它也是一种属性，加了这个属性后，就会让这份区域独立出来，简单的说就是加了这个bfc属性后，你在这里面做什么都不会影响到它之外的元素，为所欲为

二、如何开启

1、根元素(html) float属性不为none

2、position为absolute或fixed

3、display不为visible

三、bfc有什么用

1、可以解决外边距重叠的问题

外边距重叠,这不是bug，规范就是这样的，当两个盒子上下同时拥有上下间距，会显示大的那个外边距的样式

2、清除浮动

3、浮动覆盖

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

憨憨的小火锅

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快乐的bfc

快速理解，让你感受不一样的快乐
复制链接

扫一扫

bfc特性

weixin_43507534的博客

03-01

216

A、什么是BFC？ BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把BFC看成是一个985或者211的高校。 BFC首先是块其次需要具备下面的条件之一才可以是BFC B、BFC的触发条件 1、根元素 html标签就是一个bfc 2、float的值不为none 3、overflow的值不为visible ...

深入理解BFC和Margin Collapse

快乐小编的专栏

04-02

348

作为前端开发，体验和美感很重要，创造美的生活，每篇的文章会发一张自认为美的艺术的图片，与诸君共享，如果觉得文章对您有帮助，欢迎赞助我们 BFC的理解与应用首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。什么是BFC（Block

参与评论您还未登录，请先登录后发表或查看评论

BFC原理深入浅出

uperficialyu的博客

01-01

251

BFC的含义 MDN的定义: 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局；

BFC到底是什么

weixin_44736575的博客

10-14

120

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。怎样触发BFC 这里简单列举几个触发BFC使用的CSS属性 overflow: hidden display: inline-block position: absolute position: fixed display: table-cell display: flex BFC的规则

BFC2000变频器说明书.pdf

06-30

根据提供的信息，我们可以总结出关于BFC2000系列通用型变频器的重要知识点。 ### 一、产品概述 BFC2000系列通用型变频器是由杭州邦瑞机电设备有限公司生产的一种高性能变频器。该变频器主要用于电机的速度控制，...

程序员快乐之GC日志分析实战

weixin_30484149的博客

10-24

200

阅读GC日志是处理Java虚拟机内存问题的基础技能，然而GC日志仅仅是认为确定的规则，倒是没有什么技术含量，和分析排查自己系统线上错误日志基本类似。 1.如何打印GC日志打印GC日志非常简单，只要配置一下GC打印参数即可，接下来通过一个程序来看看如何查看GC日志。 1.1编写测试程序 /** * @Description:GC日志打印与OOM测试 */ public class GcLogDemo { public static void main(String[] args) .

前端工程师面试题汇总.docx编程资料

04-06

- BFC是指一个隔离的独立容器，其中的元素不会影响到容器外面的元素。通过设置`overflow`、`float`等属性可以创建BFC。 29. **CSS权重优先级计算** - CSS选择器的权重由ID选择器（100）、类选择器（10）、标签...

8年前端开发的知识点沉淀(不知道会多少字，一直写下去吧...)

江湖再见

10-14

460

我的博客：http://ruizhengyun.cn/#/code/1/content?labels=front-end 先啰嗦几句 2011年开始从事前端，从一个页面的切图仔到如今还算合格的前端工程师，一路走来，我很清楚要学的很多，其中也学了很多，学的同时也丢了很多（身陷边学边丢，边丢边学的状态）。尤其这3年，前端领域可谓是百家齐放，四面开花。可以说这是最好的时代也是最坏的时代。说它好，这...

css基础

m0_72711350的博客

11-03

439

css

CSS中禁用DOM事件

bingmoujs的博客

08-26

514

表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。

css实现元素居中显示

最新发布

weixin_42812634的博客

08-29

172

css实现元素居中显示 text-align:center; margin-left:auto; margin-right:auto; width:50%; height:100px; line-height:100px; display:flex; justify-content:center; align-items:center; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); d

前端面试宝典【CSS篇】【8】

BDawn的专栏

08-26

100

绝对单位适用于不需要缩放的场合，如打印样式。相对单位更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。

CSS的动画效果

weixin_71949204的博客

08-26

528

3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画。语法：创建动画：@keyframes 调用动画：animation。1、通过 @keyframes(关键帧动画) 规则，您能够创建动画。

CSS 知识点及使用案例

2301_78319341的博客

08-26

606

css快速入门

33.鼠标悬停时的波浪线效果 & CSS 重置

粉丝们务必加入微信粉丝群

08-25

167

通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。

CSS实现水滴效果图

N201871643的博客

08-26

378

水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。

CSS content 属性：伪元素的魔法师

2401_85341950的博客

08-25

483

CSS（层叠样式表）是控制网页样式的强大工具。其中，content属性与伪元素结合使用，能够实现许多创造性的设计效果。伪元素如::before和::after允许我们在选定元素前后插入内容，而content属性则定义了这些内容。本文将详细探讨content属性的用法，包括如何使用它来插入文本、图片、计数器等，并提供丰富的代码示例，以帮助开发者和设计师理解并应用这一功能。在CSS中，伪元素允许我们为元素添加特殊的部分或样式，而不需要修改HTML结构。最常见的伪元素是::before和::after。

CSS 的font-variant属性

读心悦

08-26

523

CSS 属性用于控制小型大写字母（small-caps）的渲染。它主要用于在需要强调文本或改变文本风格时，提供一种视觉上更加优雅的展示方式。然而，需要注意的是，并非所有字体都支持小型大写字母的渲染，这取决于字体的具体设计和支持情况。

BFC原理与应用：自适应两栏布局解析

"本文主要介绍了如何使用BFC(Block Formatting Contexts)实现自适应两栏布局，探讨了BFC的概念、触发条件以及其在布局中的应用。" BFC，全称Block Formatting Context，是Web页面布局中的一种概念，主要用于定义...