如何创建BFC

最新推荐文章于 2022-07-27 10:57:56 发布
最新推荐文章于 2022-07-27 10:57:56 发布
阅读量2.7k 收藏
点赞数 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_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BFC机制
沭瑾
08-31 225
1、BFC BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 2、BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的m...
BFC:什么是BFC？BFC作用？如何创建BFC？BFC应用场景
最新发布
m0_74114605的博客
03-23 2116
BFC属于普通流。BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做元素的一个属性，当元素拥有的BFC属性，这个元素就可以看作是隔离了的独立容器，容器里边的元素不会影响到容器外部的元素。
BFC的定义、创建、特性及应用场景
好好学习的博客
05-09 401
BFC定义 BFC(Block formatting context)直译为"块级格式化上下文"，是一个独立的渲染区域，只有块级盒子参与，规定了内部的块级盒子如何布局，与这个区域的外部毫不相干。 BFC创建 根元素 float值不为none overflow值不为visible display值为inline-block, table-cell, table-caption, flex, inline-flex, flow-root(无副作用，单纯创建BFC，但此属性很新，要考虑兼容性) positi
什么是BFC，怎么生成BFC，BFC的特性，BFC解决的问题
jijsn的博客
07-27 356
什么是BFC，怎么生成BFC，BFC的特性，BFC解决的问题
什么是BFC？如何产生？如何使用？
FVZ的博客
07-07 470
1. 什么是BFC MDN上是这样说明的 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 2.如何产生BFC 简单来说就是 1、float的值不是none。 2、position的值不是static或者relative。 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4、overflow
10分钟理解CSS BFC原理及其应用
09-27
通过创建BFC，元素会保持其正常布局，不会被内部浮动元素挤压。 BFC的应用场景广泛，比如清除浮动、解决外边距折叠问题、创建自适应两栏布局等。熟练掌握BFC原理能帮助开发者更好地控制页面元素的布局，提高页面...
CSS布局基础BFC
09-27
/* 创建BFC */ 3. background-color: blue; 4. } 5. .child { 6. float: left; 7. width: 50px; 8. height: 50px; 9. background-color: red; 10. } 11. <div class="parent"> 12. <div class="child"></div> 13. ...
BFC的布局规则.docx
03-01
在处理浮动元素导致的父元素高度塌陷问题时，可以通过创建BFC来恢复父元素的高度，例如通过设置`overflow: hidden;`。这样，父元素会包含其内部所有浮动元素的高度，避免了高度丢失的现象。 理解BFC布局规则有助于...
CSS 清除浮动与BFC的方法
11-21
BFC BFC：块级格式化上下文 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 ...如何创建BFC 1、 
诱发BFC的原因及处理方案
01-07
创建BFC可以防止这种情况，使元素能够正确地与浮动元素布局。 总结来说，理解并掌握BFC的概念对于优化CSS布局、解决浮动元素带来的问题以及避免外边距折叠等现象至关重要。通过合理利用BFC，开发者可以更好地控制...
CSS格式化上下文FC
guoqkmiss的博客
08-21 321
CSS格式化上下文FC FC（Formatting Contexts），是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 块格式化上下文 BFC（Block Formatting Context） BFC 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，外面的元素也不会影
BFC是什么？ 产生BFC的方法 BFC用来解决什么问题？
weixin_60011603的博客
03-16 196
BFC是什么？ 产生BFC的方法 BFC用来解决什么问题？
什么是BFC、可以解决哪些问题
weixin_45387568的博客
10-16 2831
BFC概念： 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 产生BFC的方法： float有值且不为空。 overflow有值且不为visible。 display有值为：inline-block，table-cell，flow-root，table-capti...
什么是BFC？如何创建BFC？
Afengzhenguang的博客
03-11 465
笔记 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原理、创建和使用场景
米老头
03-08 1840
&lt;!-- js如何获取盒模型对应的宽高 dom.style.width/height //内嵌样式 dom.currentStyle.width/height //只支持IE window.getComputedStyle(dom).width/height //兼容性好 dom.getBoundingClientRect().width/h...
什么是BFC，BFC解决哪些问题
weixin_45283069的博客
11-19 879
什么是BFC，BFC解决哪些问题
BFC是什么 创建BFC
至_臻的博客
08-23 242
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素 满足这几个条件就能创建BFC 1、float的值不是none。 ​ 2、position的值不是static或者relative。 ​ 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex ​ 4、overflow的值不是visible ...
什么是BFC（初级入门介绍）
小狼驿站
09-23 3983
原文地址链接：http://div.io/topic/834?page=1#3261 说到BFC，就会涉及到CSS布局的一些基本概念，然后，首先来讲一下关于块级盒的一些概念： 下面是来自w3.org中的一句话(参考链接:http://www.w3.org/TR/CSS2/visuren.html#block-formatting)： Block-level ele
bfc是什么，怎么触发
03-20
BFC是块级格式化上下文（Block Formatting Context）的缩写，它是一个独立的渲染区域，可以让块级元素在垂直方向上按照一定...10. column-span: all 元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值