什么是BFC

最新推荐文章于 2024-11-02 19:19:35 发布
最新推荐文章于 2024-11-02 19:19:35 发布
阅读量227 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xg1201/article/details/123957572
版权

了解bfc之前首先需要清除

是css布局的一个概念，简称块及上下文格式化，是一个独立的渲染区域,bfc是属于普通流的

怎样触发bfc
    根元素
    浮动元素
    绝对定位元素(值为absolute或fixed)
    display
    overflow
    contain
    多列容器

作用
    1、避免外边距重叠(用盒子进行包裹，通过overflow:hidden触发bfc)

before

after


    2、清除浮动(overflow:hidden触发父容器的bfc)

before

after

 


    3、阻止元素被浮动元素覆盖(给覆盖的元素添加overflow:hidden)

before

 after

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

叶涵1201
关注
什么是BFC？
weixin_48181168的博客
09-07 3536
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
qq_44957616的博客
03-01 198
BFC简介 BFC： 块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level 盒子参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 触发BFC 对于HTML文件来说，只要满足下面CSS声明中的一个就会产生BFC 根元素(html) float属性不为none position为absolute或fixed display为inline-block, tabl...
什么是BFC，他有什么用？
sqLeiQ的博客
06-13 3万+
BFC 是什么？
什么是BFC?
斜光的博客
03-23 385
BFC(块级格式化上下文)(Block formatting context) 直译为"块级格式化上下文"。是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 IE下为 Layout，可通过 zoom:1 触发 1 元素的显示模式 元素的显示模式 display。 分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。 ...
什么是 BFC
weixin_46258341的博客
07-20 76
元素首先按照普通流的位置显示，然后根据浮动的方向尽可能的向左或向右边便宜。BFC 属于普通流，是一个独立的区域，渲染规则和外部无关。1、讲 BFC 之前，先了解有哪些文档流。4、BFC 能解决什么问题。元素会整体脱离普通流。3、BFC产生的方法。
什么是BFC？BFC可以解决什么问题
06-16 9564
一、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域二、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品三、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发四、BFC可以解决的问题1、解决外边距塌陷的问题1）、父子元素的外边距塌陷问题我们在一个元素内部子元素，设置了一个margi
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 我们先了解一个名词：BFC（block formatting context），中文为“块级格式化上...
什么是BFC，哪些元素会产生BFC
c_l_a_n_n_d的博客
07-27 978
根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflowhidden;每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...
zuoxiaobai#zuo11.com#web前端BFC，什么是BFC1
07-25
字面意思很难理解，我们先来看几个例子",虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下BFC相关示例BFC是 Block Fo
什么是BFC？它的触发条件有哪些？
越陌度阡
11-13 2758
1. 什么是BFC? Block Fromatting Context， 即块级格式上下文。 W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC。 2. BFC的触发条件 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1.根元素； 2.浮动元素。元素..
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 271
关于react hooks的一些知识与应用
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1133
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
qq_30049249的博客
11-02 127
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1376
项目功能：商品分类,商品信息,用户。
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 224
遍历echarst多个图表，并添加独立的缩放函数
基于SpringBoot+Vue的快递物流信息查询系统设计与实现【前后端分离】
最新发布
m0_67428300的博客
11-02 795
随着电子商务的快速发展，快递物流系统的重要性愈发突出。针对用户对快递信息的实时查询需求，本系统结合Spring Boot和Vue技术，设计并实现了一个高效、易用的快递物流信息查询系统。系统实现了用户信息管理、订单查询、物流跟踪等功能，用户可通过简单操作即可查询快递状态，实现信息的实时展示。本快递物流信息查询系统基于Spring Boot与Vue的开发，前后端分离架构提升了系统的扩展性和开发效率。
JavaScript的第十一天
全栈学习ing
10-31 729
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
css中的BFC是什么
06-06
BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于控制块级元素的布局和浮动元素的交互行为。 BFC 是一个独立的渲染区域，具有一定的属性和行为，它内部的元素按照一定的规则进行布局。在 BFC 中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（对于从右到左的格式化，右外边缘会触碰到右边缘），即使存在浮动也是如此。 BFC 的触发条件： - 根元素（html） - float 不为 none - position 为 absolute 或 fixed - display 为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 或 table-column 等 CSS3 属性 - overflow 不为 visible BFC 的主要作用: - 清除浮动：在 BFC 中，浮动元素会被包裹在一个矩形框中，不会影响到外部元素的布局，从而可以解决父元素高度塌陷的问题。 - 防止 margin 重叠：在 BFC 中，相邻元素的 margin 会被分开，不会发生重叠的现象。 - 控制元素的布局：在 BFC 中，元素的布局是相对独立的，不会受到外部元素的影响，从而可以控制元素的位置和尺寸。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值