介绍下 BFC 及其应用

最新推荐文章于 2024-08-03 17:34:58 发布
最新推荐文章于 2024-08-03 17:34:58 发布
阅读量309 收藏 1
点赞数
分类专栏： 每日一道题 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LxLzhz/article/details/112562507
版权

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

1、html 根元素
2、float 浮动
3、绝对定位
4、overflow 不为 visiable
5、display 为表格布局或者弹性布局
BFC 主要的作用是：

1、清除浮动
2、防止同一 BFC 容器中的相邻元素间的外边距重叠问题

LxLzhz
关注
专栏目录
BFC的原理以及应用场景
rain_zhh的博客
10-03 654
BFC的原理以及应用场景 一.定义 BFC(Block Formattin Context) 直译过来就是块级格式化上下文，它是页面中一块独立渲染的区域,有一套渲染规则,只有Block-level box参与,也就是只有块级盒子参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部无关 FC(Formattin Context)是W3C CSS2.1规范中的一个概念,它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用,最常见的有
浅谈CSS潜藏着的BFC
09-24
BFC在实际应用中有诸多用例，以下是两个常见的问题及其解决方案： 1. 解决margin重叠问题 当我们有两个相邻的垂直元素且都设置了margin时，这两个元素的margin会发生重叠，实际显示的外边距会是两者中较大的那个值...
bfc的详细介绍以及大总结
01-17
BFC详细介绍BFC详细介绍
BFC的介绍和运用
binlety
08-05 461
BFC的定义： BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 作用： 创建BFC来避免垂直外边距叠加 创建BFC来清除浮动 创建BFC来实现自适应布局...
认识BFC
最新发布
weixin_43929122的博客
08-03 285
介绍BFC（Block Formatting Context）格式化上下文的几种特性
bfc详细介绍及其应用实例
ljyahaha的博客
02-22 811
前端布局中有一个经常出现的手段:BFC，从前知识零零碎碎的了解一些，今天专门搜集了这方面的资料，在此总结一下，并给出案例。想要了解BFC，需要有一些预备知识：三种布局手段（标准流、浮动、定位），盒的显示模式display。 1、BFC的定义 Block Formatting Context 块级格式化上下文，属于普通流，我们可以将其看成页面内的一块渲染区域，有着自己的渲染规则，不受其他规则的影响，bfc区域内就像是一个隔离的盒子，内部的元素不影响外部元素。听起来BFC是一个很好的东西，那么如何触发BFC呢？
BFC的介绍及应用
weixin_44874595的博客
02-13 181
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。 BFC特性： 内部box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于...
10分钟理解CSS BFC原理及其应用
09-27
例如，两个在同一BFC下的div元素，它们之间的外边距只会显示为两者中较大的那个。要避免这种情况，可以将它们置于不同的BFC中，如通过设置`overflow: hidden`。 2. **包含浮动元素（Clearing Floats）**：BFC可以...
关于BFC及其应用
lynn_rose的博客
02-23 430
关于BFC（块级格式化上下文）走近BFC一、什么是BFC二、触发条件三、规则四、应用1. 阻止margin重叠2. 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)3. 自适应两栏布局、阻止元素被浮动元素覆盖总结（附加万能清除法解决高度塌陷问题） 走近BFC 一、什么是BFC BFC被很多人提及，但是又有一部分人对此并没有很好的解释，那BFC到底是什...
BFC的介绍
初漾的博客
08-29 341
转自：http://www.cnblogs.com/heimanba/p/3774086.html
浅谈BFC及其应用
worm_IT的博客
06-09 2491
        说起页面的布局，不得不提一个容易忽略但是很重要的东西——BFC(block formatting context)，翻译的直接点就是块级格式化上下文，翻译的有意境点就是开辟自己的地盘。以下是我对BFC的一些理解，如你在阅读时发现有错误，为了避免误导其他读者，请及时联系我。一、什么是BFC        BFC是一个独立的渲染区域，只有block-level box参与，它规定了内部...
BFC的作用及其应用
a13372829908的博客
08-29 113
　简单介绍BFC 　BFC 　　就是块级格式化上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。 　创建 BFC 的方式有： 　　1.html的根元素 　　2.float浮动 　　3.绝对定位 　　4.overflow不为visible 　　5.display为表格布局或弹性布局 　　6.contain值...
BFC 理解和应用-什么是BFC ？如何应用？
m0_49456900的博客
03-01 402
BFC 是 Block format context 块级格式化上下文的缩写。表示一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。 形成BFC 的常见条件： float不是 none ；position是 absolute 或 fixed ；overflow 不是 visible ； Display 是 flex、inline-block等。 形成BFC 的常见应用： 清除浮动、取消盒子margin塌陷问题、可以阻止元素被浮动元素覆盖 ...
BFC:什么是BFC？BFC作用？如何创建BFC？BFC应用场景
m0_74114605的博客
03-23 2981
BFC属于普通流。BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做元素的一个属性，当元素拥有的BFC属性，这个元素就可以看作是隔离了的独立容器，容器里边的元素不会影响到容器外部的元素。
BFC概念及其应用
松一160
02-23 1858
一、BFC概念 BFC就是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 二、触发 BFC 只...
BFC及其应用
wangpachong的博客
04-28 162
BFC及其应用 BFC的定义： Block Formatting Context 块级格式化上下文，属于普通流，我们可以将其看成页面内的一块渲染区域，有着自己的渲染规则，不受其他规则的影响，bfc区域内就像是一个隔离的盒子，内部的元素不影响外部元素。 触发BFC： 1.body根元素 2.设置浮动(元素的float不包括none) 3.设置定位(position为absoulte或者fixed) 4.行内块显示模式，inline-block 5.设置overflow，即hidden，auto，scroll
浅谈CSS BFC及其应用
筱葭的博客
03-06 803
Block Formatting Context，即块级格式上下文。 创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。 1、BFC的特性 （1）内部的Box会在垂直方向，从顶部开始一个接一个地放置。 （2）B
BFC详解以及BFC的应用
q1312882392的博客
09-03 360
什么是BFC？ BFC（Block Formatting Context ）块级格式化上下文。BFC是CSS里的一种规则。 BFC的原理 内部的box会在垂直方向，一个接一个的放置 每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反） box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠 bf...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值