什么是BFC

最新推荐文章于 2024-06-16 13:16:08 发布
最新推荐文章于 2024-06-16 13:16:08 发布
阅读量101 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65382120/article/details/126277348
版权

fc：   元素在标准流中都属于一个fc

 bfc用个简单例子来说一下吧：

就像两个div为什么是从左开始的，为什么是垂直排布的，这些都是bfc帮我们实现的，那么在什么情况下会产生bfc呢，参考MDN文档

 margin在同一个bfc中会折叠，反之，让他们不在一个bfc中就能解决这个问题

 二、解决浮动塌陷

bfc解决浮动塌陷要满足两个条件

1.父级形成bfc 

2.父级高度为auto

 

学无止境s
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...
zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1
07-25
字面意思很难理解，我们先来看几个例子",虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下BFC相关示例BFC是 Block Fo
什么是BFC？
weixin_48181168的博客
09-07 3472
1.BFC到底是什么东西 BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。 简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性 2.怎
什么是BFC？看这一篇就够了
热门推荐
Leon的博客
03-23 27万+
BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。 Box：css布局的基本单位 Box 是 CSS 布局...
什么是BFC，他有什么用？
sqLeiQ的博客
06-13 3万+
BFC 是什么？
什么是 BFC
weixin_46258341的博客
07-20 38
元素首先按照普通流的位置显示，然后根据浮动的方向尽可能的向左或向右边便宜。BFC 属于普通流，是一个独立的区域，渲染规则和外部无关。1、讲 BFC 之前，先了解有哪些文档流。4、BFC 能解决什么问题。元素会整体脱离普通流。3、BFC产生的方法。
什么是bfc
weixin_45821809的博客
02-22 248
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。（自己理解就是触发bfc的元素会脱离文档流，也就是说别的元素看不到它了）） 脱离文档流：元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。 触发bfc的条件 1、浮动元素，float
什么是BFC？BFC可以解决什么问题
06-16 9346
一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品三、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发四、BFC可以解决的问题1、解决外边距塌陷的问题1）、父子元素的外边距塌陷问题我们在一个元素内部子元素，设置了一个margi
什么是BFC？它有什么作用？如何创建BFC？
官方推荐
08-11 5897
什么是BFC？它有什么作用？如何创建BFC？
HTML-bfc初探
08-03
HTML-bfc初探
BFC实现自适应两栏布局
01-20
回想第一次听到BFC的时候，是在解释为什么高度塌陷可以用overflow:hidden;等方法来解决的时候，当时BFC对我来说还是一个陌生的概念。在解决高度塌陷的问题的时候，通过BFC的触发条件之一触发BFC后，在计算BFC的高度...
10分钟理解CSS BFC原理及其应用
09-27
CSS BFC（Block Formatting Context，块级格式化上下文）是Web页面布局中的一个重要概念，它定义了一个独立的渲染区域，具有自己特定的布局规则。理解BFC的原理对于解决CSS布局问题和优化页面样式有着重要作用。 ...
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 466
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1462
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 573
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
lyd的博客
06-15 418
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
web前端拖拽工具：探索其复杂性、困惑度与爆发度
liyrbtqe_66w的博客
06-12 441
综上所述，Web前端拖拽工具虽然带来了便捷和效率，但同时也伴随着一定的复杂性、困惑度和挑战。对于开发者来说，深入了解拖拽工具的技术原理和应用场景，掌握其使用方法和优化技巧，是提升开发效率和降低项目风险的关键所在。然而，在实际项目中，由于项目需求、技术栈以及团队协作等多种因素的影响，开发者可能会遇到各种复杂的问题和挑战。然而，随着功能的增多和复杂化，开发者在使用拖拽工具时可能会遇到一些困惑和挑战。同时，随着Web组件化、模块化等趋势的普及，拖拽工具也可能会朝着更加标准化、可复用的方向发展。
Web前端写随机抽奖：技术与创意的碰撞
最新发布
yvnmth_025y的博客
06-16 293
这些创意构思不仅能够提升抽奖活动的趣味性和互动性，还能够吸引更多的用户参与。除了基本的抽奖功能和界面设计外，我们还需要关注用户的交互体验。同时，我们还要确保抽奖过程的公平性和透明度，避免出现任何作弊行为。通过构建合理的抽奖逻辑、设计美观的界面、优化交互体验以及拓展创意构思，我们可以为用户带来更加有趣和丰富的抽奖体验。在Web前端的世界里，随机抽奖功能不仅是一种常见的交互元素，更是技术与创意的完美结合。下面，我们将从四个方面、五个方面、六个方面和七个方面，深入探讨Web前端实现随机抽奖的技术要点和创意构思。
css中的BFC是什么
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

学无止境s

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

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

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

打赏作者

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

抵扣说明：

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

余额充值