如何创建BFC

最新推荐文章于 2022-07-23 11:51:33 发布
最新推荐文章于 2022-07-23 11:51:33 发布
阅读量2.8k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L1651430795/article/details/52016466
版权

当一个HTML元素满足下面条件的任何一点，都可以产生BFC：

常见的：


float的值不为”none” (如：float:left/right)


overflow的值不为”visible”(如：overflow:hidden)


display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个


position的值不为 “static” 或 “relative”中的任何一个(如：position:absolute)等

_Linas_
关注
什么是BFC（块级格式化上下文）？如何创建一个BFC？
祈澈菇凉
10-21 686
2：使用overflow属性：将一个元素的overflow属性设置为除"visible"以外的值（例如"hidden"、“auto”、“scroll”）可以创建一个BFC。4：使用display属性：将一个元素的display属性设置为"inline-block"、“table-cell”、“table-caption”、“flex”、"inline-flex"等，也会创建一个BFC。3：使用float属性：给一个元素设置float属性为"left"或"right"也会创建一个BFC。
BFC是什么？其实就是创建一个独立的盒子，盒子里面的子元素不会影响到外面元素，反之亦然
weixin_44077629的博客
04-04 989
文章目录BFCBox：css布局的基本单位Formatting contextBFC的布局规则(渲染规则/约束规则)BFC的生成（即一个块级格式化上下文由以下之一创建）BFC应用场景场景1-解决margin叠加问题场景2-用于布局场景3-用于清除浮动，计算BFC高度总结BFC原理(渲染规则)如何创建BFCBFC应用场景参考 BFC 在解释什么是BFC之前，我们需要先知道Box、Formattin...
前端精选文摘：BFC 神奇背后的原理
weixin_33835690的博客
04-23 797
　　BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。 一、BFC是什么？ 　　在解释 BFC 是什么之前，...
CSS格式化上下文FC
guoqkmiss的博客
08-21 335
CSS格式化上下文FC FC（Formatting Contexts），是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 块格式化上下文 BFC（Block Formatting Context） BFC 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，外面的元素也不会影
什么是BFC？如何创建BFC？
Afengzhenguang的博客
03-11 488
笔记 BFC是什么？ BFC是只块级格式化上下文 如何创建BFC？ float的值不为none overflow的值不为visible position的值为fixed/absolute display的值为inline-block/flex/inline-flex BFC的特性 同一个BFC的两个相邻容器的上下margin会重叠 计算BFC高度时浮动的元素也会参与计算 BFC的区域不会与浮动元素发生重叠 BFC是独立的容器，容器内部元素不会影响容器外部的元素 BFC应用 外边距重叠问题（BF
前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？
鱼头的Web海洋
07-23 2090
作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. CSS盒模型描...
CSS之BFC
从来无所求，所得皆惊喜！
06-04 1431
BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
HTML-bfc初探
08-03
- 清除浮动：给父元素设置`overflow:hidden`或者`display:flex`等，创建BFC，使父元素包裹住浮动子元素。 - 创建侧边栏和主要内容的并排布局：通常使用浮动元素和清除浮动来实现，也可以通过创建BFC实现。 6. **...
10分钟理解CSS BFC原理及其应用
09-27
通过创建BFC，元素会保持其正常布局，不会被内部浮动元素挤压。 BFC的应用场景广泛，比如清除浮动、解决外边距折叠问题、创建自适应两栏布局等。熟练掌握BFC原理能帮助开发者更好地控制页面元素的布局，提高页面...
css布局中的BFC问题
田兴的博客
10-19 8733
1. 面试题—双边距（边距重叠） 什么是边距重叠？ 什么情况下会发生边距重叠？ 如何解决边距重叠？ 边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。 有两种边距重叠的情况： 1. 父子关系的边距重叠 父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化。
如何产生BFC？
weixin_68094130的博客
07-23 162
如何产生BFC？
如何形成BFC？
weixin_45454433的博客
01-06 492
BFC是什么？它叫做块级格式化上下文。如果元素想出发BFC的话，会让元素形成一个独立的区域，不会收到外界干扰，并且也不会影响到外部的情况就会形成一个BFC。 1.使用浮动 2.定位：针对绝对定位（absolute）跟固定定位（fixed） 3.overflow：hidden ...
BFC开启条件
weixin_30892763的博客
04-12 440
当元素CSS属性设置了下列之一时，即可创建一个BFC: float：left|right position：absolute|fixed display: table-cell|table-caption|inline-block overflow: hidden|scroll|auto 转载于:https://www.cnblogs.com/tjyuanpeng/p/366157...
开启元素BFC的三种方法
qq_57057576的博客
03-17 1740
可以通过一些特殊方式来开启元素的BFC: 1、设置元素的浮动(不推荐) 2、将元素设置为行内块元素display：inline-block(不推荐) 3、设置overflow: hidden
BFC原理、创建和使用场景
米老头
03-08 1882
<!-- js如何获取盒模型对应的宽高 dom.style.width/height //内嵌样式 dom.currentStyle.width/height //只支持IE window.getComputedStyle(dom).width/height //兼容性好 dom.getBoundingClientRect().width/h...
如何开启BFC模式
qq_43248814的博客
07-08 331
如何开启BFC模式，有几种方式
盒子模型——网页布局、浮动、如何开启BFC
TKY666的博客
03-10 1007
前述： 传统网页布局的三种方式： 网页布局的本质----用css来摆放盒子，把盒子摆到相应位置 css提供了三种传统布局方式（简单易懂就是盒子如何进行排列顺序）： 标准流（普通流/文档流） 浮动 定位 一、标准流（普通流/文档流） 所谓的标准流：就是标签按照规定好默认方式排列 二、浮动 float : left 左浮动 float ：right 右浮动 float : none 默认 不浮动 1.浮动元素会脱离标准流（脱标） 脱离标准流的控制（浮）移动到......
如何创建一个BFC和BFC的使用场合
weixin_46412436的博客
06-16 735
BFC(Block formatting Context) 块级格式化上下文，布局规则如下： 1.内部的盒子会在垂直方向，一个一个地放置； 2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠； 3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 4.BFC的区域不会与float重叠； 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此； 6.计算BFC的高度时，浮动元素也参与计算。 怎样会触发BF
理解CSS中的BFC和IFC：原理与应用
1. 防止margin重叠：通过创建BFC，可以避免相邻块元素之间的垂直margin合并，如设置`overflow:hidden`。 ```html .p { width: 200px; height: 50px; margin: 50px 0; background-color: red; overflow: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值