BFC模式详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了BFC模式详解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3576字,纯文字阅读大概需要6分钟。
内容图文
![BFC模式详解](/upload/InfoBanner/zyjiaocheng/413/b3e5ca54b6794212bf2cca9a1afaaf88.jpg)
详解BFC【 block formatting context】
BFC这个东西说常见的话你可能不觉得,但是你肯定会常用到,也许你在用的时候也没想到BFC这东西。那它究竟是什么呢,我们来一起看一下。
官方给出的BFC解释是这样的,浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells
, 和 table-captions
),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里,盒子从包含块的顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘),即使存在浮动也是如此,除非这个盒子创建一个新的块级格式化上下文。
上面反复提到了“ block formatting context
”,显而易见BFC就是他们的缩写,官方还有”inline formatting context
“,那也就是说”formatting context
“我们需要仔细的看一下是什么意思,那我们就拆分来看看:
formatting:n,格式化的意思,v,使格式化( format的现在分词 ); 规定…的格式(或形状、大小、比例等);
context:语境; 上下文; 背景; 环境;
放到一起的意思就是“格式化上下文”,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
最常见的Formatting context有Block fomatting context
(简称BFC)和Inline formatting context
(简称IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC.
Box也是比较重要的一个概念,Box是CSS布局的对象和基本单位, 直观点来说,就是一个页面是由很多个Box(即boxes)组成的。元素的类型和display属性,决定了这个Box的类型。 不同类型的Box, 会参与不同的Formatting context
(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。
例如display属性值为block, list-item, table的元素,会生成block-level box。并且参与block fomatting context。 inline-level box: display属性为inline, inline-block, inline-table的元素,会生成inline-level box。并且参与inline formatting context
。
那么我们通俗的理解一下,BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。
那么我们来一起看一下BFC盒子的一些特性:
1、内部的Box会在垂直方向,从顶部开始一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
3、每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box叠加。
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
6、计算BFC的高度时,浮动元素也参与计算。
在哪些场景可以用到BFC
1.解决margin叠加问题
当盒子上下排布,上方盒子margin-bottom:50px;下面的盒子margin-top:50;那么神奇的事情就发生了,两个盒子按照叠加来算的话,距离应该是100px,但是我们发现实际上两个margin值进行了叠加,只剩下50px,那么这个时候我们就可以触发BFC模式,给其中一个盒子添加一个父级元素;
2.用于布局
元素的左外边距会触碰到包含块容器的做外边框,就算存在浮动也会如此,那么我们可以利用这种方式来一个两列布局,第一个盒子浮动,第二个盒子margin-left赋值;
3.用于清除浮动,计算BFC高度
我们发现由于里面两个子元素浮动的关系,两个box已经脱离了父元素的包含块,父元素高度已经塌陷,我们需要让父元素包含两个box子元素,这样计算高度时,两个浮动子元素就会参与,所以我们要闭合浮动,触发父元素的BFC,例如overflow:hidden;
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
css中属性值继承如何使用
css做出打点效果
CSS3的属性transition、animation、transform
以上就是BFC模式详解的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的BFC模式详解全部内容,希望文章能够帮你解决BFC模式详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。