BFC形成条件和应用

最新推荐文章于 2022-09-17 15:44:57 发布
最新推荐文章于 2022-09-17 15:44:57 发布
阅读量929 收藏 4
点赞数
文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supershuxu/article/details/107126825
版权

BFC形成条件和应用

生成条件:
1、根元素
2、float不为none
3、overflow不为visible
4、display为inline-block、table-cell、table-caption
5、position为absolute或fixed
应用:
1、防止margin上下重叠 使用方式: 给其中一个元素外面套一个div， 把这个div变成BFC
2、高度塌陷第一种解决方式
3、自适应两栏布局 使用方式: 侧边栏浮动，重要内容区域变成BFC

旭旭旭旭啊
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
10分钟理解CSS BFC原理及其应用
09-27
主要介绍了10分钟理解BFC原理及其应用的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
BFC的形成条件和特性分析
刘默默的博客
04-08 705
初学CSS时，我们学到很多有意思的CSS规则，比如外边距塌陷，还有浮动元素的一些特性等，其实这些规则背后都是BFC这个东西在控制，下面我们来看下BFC到底是什么。 什么是BFC BFC（Block formatting contexts），翻译过来就是块级格式化上下文，指的是一种上下文环境，我们暂且不管它为什么叫这么晦涩冗长的名字，先看看哪些情况能形成BFC，然后看看它有哪些特性，这样
BFC机制
沭瑾
08-31 222
1、BFC BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 2、BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的m...
BFC 形成条件
weixin_30856725的博客
03-17 250
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 下列方式会创建块格式化上下文： 根元素或包含根元素的元素 浮动元素（元素的float不是none） 绝对定位元素（元素的position为absolute或fixed） 行...
BFC的形成条件以及作用
weixin_73610299的博客
09-17 237
BFC属于独立的渲染区域，不会影响外部其他的元素或box，且会格式化上下文。2）dispaly：inline-block或flex。3）overflow除去默认值visible的所有属性。4）定位除去absolute的所有属性。内部元素的浮动不会影响外部元素。高度由浮动元素和box一起计算。1）添加浮动float。
BFC的形成条件与能解决的问题
weixin_44607531的博客
02-21 468
俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~ 若有问题请留言或私信！ 先解析一下BFC是什么 BFC(block formatting context)块级格式化上下文 定义：是web页面对盒模型采用不同的渲染模式，形成隔离的独立容器。 BFC的形成条件 1、根元素。html标签 2、浮动元素float。除none 3、定位元素position。absolute fixed 4、display。inline-block table-cell table-captio...
haslaylout 和 bfc解析的理解
09-22
bfc是独立的一个容器，不影响其他布局，也不会受影响，利用其特性，可以解决清除浮动，2栏布局等问题
浅析CSS里的BFC和IFC的用法
01-19
和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。 它是页面中的一块渲染区域，并且有一套渲染规则. 它决定了其...
什么是BFC？ CSS 使用伪元素清除浮动的方法
12-13
BFC概念： 　块级格式化上下文，是一个独立的...BFC元素也可以用来清除浮动带来的影响，因为如果不清除，子元素浮动则会造成父元素高度塌陷，必然会影响后面元素的布局和定位，这显然有违BFC元素的子元素不会影响外部
面试之----产生BFC的条件（块级格式化上下文）
AsBefore麦小兜
05-14 176
1、float 不等于 none 2、overflow 不等于 visible 3、postion=flex 或 absolute 4、根元素 5、display：inline-block;table-cell;flex;inline-flex;table-caption
BFC
小白向前冲！
06-05 9964
https://blog.csdn.net/liuliuliu_666/article/details/70847566 https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html https://developer.mozilla.org/zh-CN/docs/Web/JavaScrip...
BFC及其触发条件
m0_60887160的博客
08-12 219
BFC（块级元素格式化上下文）Block Formatting Contexts 触发条件 overflow不为visible float不为none display:inline-block/table-cell/table-caption position不为absolute/fixed 父元素转换为根元素display:flow-root
BFC的布局规则以及触发条件
qq_40301211的博客
03-31 875
1.BFC的含义 ： BlockFormattingContexts（BFC） 块级元素格式化上下文 它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系 块级元素：父级（是一个块元素） 内容：子元素（是一个块元素） 其他元素：与内容同级别的兄弟元素 相互作用：BFC里的元素与外面的元素不会发生影响 ...
BFC的触发条件
weixin_30813225的博客
03-24 313
BFC（Block Formatting Context）的触发条件 　　BFC（Block Formatting Context ）块级格式化上下文，从字面的意思真的很难理解，我特别喜欢张鑫旭的 " CSS世界的结界 " 的叫法，非常的形象生动，看过火影的同学都知道，非常厉害的忍术都会形成结界，形成一个封闭的空间，里面的人出不来，外面的人进不去，BFC就是如此。 下面是BFC触发的条件，总结...
BFC的概念与触发条件
一只正在狂飙的肥兔
01-09 331
BFC的概念 BFC即：Block Formatting Contexts ( 块级格式化上下文 ) 通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部 BFC所分析的是块级元素底层原理 ，只针对块级元素，但不是所有的块都是BFC，需要满足一定的条件 IFC：行内元素的底层原理 BFC的触发条件 根元素 html默认就是一个BFC float 的值不为 none 单纯的 <div> 不是BFC，如果添加了浮动就是BFC ove
如何形成BFC？
weixin_45454433的博客
01-06 456
BFC是什么？它叫做块级格式化上下文。如果元素想出发BFC的话，会让元素形成一个独立的区域，不会收到外界干扰，并且也不会影响到外部的情况就会形成一个BFC。 1.使用浮动 2.定位：针对绝对定位（absolute）跟固定定位（fixed） 3.overflow：hidden ...
bfc的特性及原理
koala40的博客
06-14 487
什么是BFC BFC（Block Formatting Context） 会计格式上下文，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。即BFC是一个独立的布局环境，内部的元素无论怎么操作都不会影响到外部。 BFC产生条件 1.overflow不为visible 2.浮动 3.position为absolute或者fixed 4.display为inline-block、table-cell、table-caption、table-flex BFC的作用 1.内部的box会在垂直方向一个
什么是BFC？BFC的形成条件？BFC的应用场景
qq_52822043的博客
09-15 1806
BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。
什么时候使用BFC布局
最新发布
05-13
BFC（Block Formatting Context）布局是一种常用的布局方式，特别适用于处理浮动元素、清除浮动、防止 margin 重叠等问题。以下是一些常见情况下建议使用BFC布局的场景： 1. 处理浮动元素：当一个元素设置了浮动属性后，它会脱离文档流并可以覆盖其他元素。此时可以将其父元素设置为 BFC，使得浮动元素只能在 BFC 内进行布局，从而避免影响其他元素的布局。 2. 清除浮动：当父元素包含浮动元素时，父元素的高度无法被撑开，可能导致父元素无法完全包含子元素。此时可以将父元素设置为 BFC，使得父元素的高度可以被包含其中的浮动元素撑开。 3. 防止 margin 重叠：当两个相邻的元素都设置了 margin 属性时，它们的 margin 可能会合并，导致 margin 重叠问题。此时可以将其中一个元素或者其父元素设置为 BFC，使得 margin 不会合并。 总之，BFC 布局可以帮助我们更好地控制元素的布局，避免一些常见的布局问题。但是，在实际应用中也需要注意 BFC 的特性可能会影响到其他元素的布局，需要进行合理的设计和调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值