什么是BFC以及如何触发BFC

最新推荐文章于 2024-04-30 08:48:14 发布
最新推荐文章于 2024-04-30 08:48:14 发布
阅读量297 收藏
点赞数
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TX9271000911/article/details/125773890
版权

什么是BFC：块级格式化上下文

怎么触发BFC：定位(不能是static和relctiv)、浮动(除none)、display(inline-block、table-cell、table-caption、flex、inline-flex)

overflow（除visible）

作用：利用BFC避免margin重叠（塌陷）防止文字环绕、清除浮动的影响，其实作用就是解决我们布局中所存在盒子的塌陷问题

小谭同学ya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中关于触发BFC
sunshine_hl的博客
10-21 3461
CSS中关于触发BFC
【CSS】如何清除浮动的影响、BFC
weixin_43790653的博客
01-20 645
CSS如何清除浮动的影响、BFC 参考文章： 1.清除浮动： https://segmentfault.com/a/1190000041226085 https://blog.csdn.net/m0_59897687/article/details/122522929 2.浮动与绝对定位： https://blog.csdn.net/csdn_ds/article/details/75145682 3.box-shadow： https://www.cnblogs.com/dongtianee/p/4545
【常见问题】BFC、Flex
最新发布
油墨香^-^的博客
04-30 19
flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果所有项目的flex-grow属性相等（或都为1），将等分剩余空间，如果有一个为2，那么它占据的剩余空间将比其他项目多；如果设置 flex:1，就等于 flex: 1 1 0;如果设置 flex:1，就等于 flex: 1 1 0;flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
何为BFC
weixin_30657541的博客
03-27 82
　BFC 定义　　BFC(Block formatting context)直译为"块级格式化上下⽂文"。它是⼀一个独⽴立的渲染区域，只有Block-level box参 与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。　　BFC布局规则：内部的Box会在垂直⽅方向，⼀一个接⼀一个地放置。 Box垂直⽅方向的距离由margin决定。属于同⼀一个BFC的两个相...
前端面试笔记4：BFC(BFC是什么、BFC怎么触发、BFC能解决什么问题)
qq_52287721的博客
12-29 423
BFC 文章目录BFC1. BFC 是什么？2. BFC 怎么触发？3. BFC 具体解决的问题margin 边距合并问题margin 塌陷问题高度塌陷问题 1. BFC 是什么？ 首先要介绍一下关于文档流相关的知识。 文档流分为三个部分： 普通流； 定位流； 浮动流； 这三种流在布局的时候会相互影响，进而产生一些问题。 这些问题要通过一种统一的方式来解决，就是通过 BFC 的方式来解决。 BFC 即 block formatting context ，块级格式化上下文。上下文指的就是区域，实际上 BF
bfc是什么_关于margin的两个经典bug，以及bfc简述
weixin_39955154的博客
11-27 154
margin两个经典bug:处理bug漏洞，只能弥补，不能完全解决。一、margin 塌陷问题：没加 margin 时，给wrapper的子元素加上margin-top之后，发现父元素也跟着子元素走，给wrapper加上margin-top之后，发现子元素的margin-top变成100px了，这就是margin塌陷问题，注意：垂直方向的margin-top，父子元素是结合到一起的，它俩会取最大的...
BFC——通俗理解什么是BFC
木的又
04-22 3438
文章目录常规流布局BFC的概念BFC的创建BFC的特性BFC的应用解决高度坍塌的问题相邻父子元素外边距合并问题无视浮动盒子排序问题总结 在理解BFC之前，我们需要先回顾常规流布局的概念（忘记或者还没看的小伙伴点击前端CSS基础——常规流布局） 常规流布局 常规流块盒独占一行 常规流块盒在垂直方向依次摆放 常规流块盒父子元素外边距合并 常规流块盒排列无视浮动元素或者脱离常规流布局的元素 常规流块盒...
什么是BFC，哪些元素会产生BFC
c_l_a_n_n_d的博客
07-27 936
根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflowhidden;每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...
BFC实现自适应两栏布局
01-20
将右侧栏的`display`属性设置为`inline-block`，同样可以触发BFC，并实现自适应效果。 ```css .left { width: 300px; height: 300px; background: darkred; float: left; } .right { height: 600px; /* 可以...
10分钟理解CSS BFC原理及其应用
09-27
当父元素触发BFC（如设置`overflow: hidden`），它会自动扩展以包裹所有浮动的子元素。 3. **防止元素被浮动元素覆盖**：BFC可以帮助防止非浮动元素被内部的浮动元素覆盖。通过创建BFC，元素会保持其正常布局，不会...
CSS布局基础BFC
09-27
BFC可以通过多种方式触发，如浮动、绝对定位、overflow不为visible的块级元素等。理解BFC对于解决CSS布局问题，如浮动元素塌陷、清除浮动、防止元素重叠、创建自适应布局等具有重要意义。通过熟练掌握BFC，开发者...
CSS理解块级格式上下文（BFC）
12-13
1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级...满足以下条件之一都可以触发BFC，变身为BFC 根元素 float属性不为none position不为
什么是BFC，如何触发BFC,BFC的作用
打工人
04-19 2969
BFC：块级格式化上下文 理解：BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. BFC的布局规则 一、内部的Box会在垂直方向，一个接一个地放置。 二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） 三、每个元素的margin box的左边， 与包含块border box的左边相接触 四、BFC的区域不会
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
qq_40261601的博客
02-25 1862
简单来说，BFC提供了一个独立的布局环境，BFC中的元素布局不受外部元素的影响，也不会影响到外部元素。触发BFC的几种方式1、给元素设置浮动 float: left | right2、给元素设置脱离文档流的定位 position: absolute | fixed3、给元素设置内容溢出 overflow: hidden | scroll |auto4、给元素设置 display: flex | inline-block | table-cell。几种常见问题：1、父级外边距折叠塌陷问题2、margi
css中的bfc是什么？如何会触发
子玉的博客
01-12 517
7. 匿名表格单元格元素（display 属性为 table、table-row、table-row-group、table-header-group、table-footer-group 之一）。当一个元素触发 BFC 后，它会按照 BFC 的规则来进行布局，与其他元素相互影响时会有特定的行为，例如阻止浮动元素重叠、清除浮动、自适应父元素等。BFC中的元素垂直排列，一个块级元素紧跟在另一个块级元素的下方。BFC中的浮动元素会被包含在BFC中，不会影响到外部元素的布局。BFC中的元素不会与浮动元素重叠。
css布局中的BFC问题
田兴的博客
10-19 8590
1. 面试题—双边距（边距重叠） 什么是边距重叠？ 什么情况下会发生边距重叠？ 如何解决边距重叠？ 边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。 有两种边距重叠的情况： 1. 父子关系的边距重叠 父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化。
前端CSS必知：BFC及其触发条件
清颖的博客
08-08 6600
文章目录1. bfc的理解（块级格式化上下文）2. 触发bfc的方式：3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子4. bfc布局规则特性：5. 两栏布局6. 补充：7. 块元素高度不设或宽度不设的情况。 将本人好久之前的 云笔记 搬到博客上来，统一维护。 1. bfc的理解（块级格式化上下文） 可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。 可通过css属性触发。 浮动元素产生了浮动流，块级元素看不到； 文本类属性的元素（inline)，文本元素和产生了bfc的元
盒子模型——网页布局、浮动、如何开启BFC
TKY666的博客
03-10 973
前述： 传统网页布局的三种方式： 网页布局的本质----用css来摆放盒子，把盒子摆到相应位置 css提供了三种传统布局方式（简单易懂就是盒子如何进行排列顺序）： 标准流（普通流/文档流） 浮动 定位 一、标准流（普通流/文档流） 所谓的标准流：就是标签按照规定好默认方式排列 二、浮动 float : left 左浮动 float ：right 右浮动 float : none 默认 不浮动 1.浮动元素会脱离标准流（脱标） 脱离标准流的控制（浮）移动到......
XML介绍
kv110的专栏
04-17 467
XML
bfc是什么，怎么触发
03-20
BFC可以通过以下方式触发： 1. 根元素或包含根元素的元素 2. 浮动元素（元素的 float 不是 none） 3. 绝对定位元素（元素的 position 为 absolute 或 fixed） 4. 行内块元素（元素的 display 为 inline-block） 5. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值