首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浅析CSS里的 BFC 和 IFC

浅析CSS里的 BFC 和 IFC

作者头像
腾讯NEXT学位
发布2018-05-15 10:39:33
1.3K0
发布2018-05-15 10:39:33
举报
文章被收录于专栏:腾讯NEXT学位腾讯NEXT学位

前言


之前一直听到有人提到 CSS里的BFC,正巧在 IFE的练习里遇到了外边距折叠的问题,所以正好弄清楚BFC的机制。

一、 什么是 BFC


和之前所有博文一样,还是先从What的角度开始介绍,由浅入深的理解BFC。

所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域,并且有一套渲染规则. 它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

而 Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,反之也如此。

BFC的布局规则如下: 1、内部的盒子会在垂直方向,一个个地放置; 2、 BFC是页面上的一个隔离的独立容器; 3、属于同一个BFC的两个相邻Box上下margin会发生重叠 ;

4、 计算BFC的高度时,浮动元素也参与计算;

5、每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;

6、 BFC的区域不会与float重叠;

那么如何触发 BFC呢?只要元素满足下面任一条件即可触发 BFC 特性:

  • body 根元素;
  • 浮动元素:float 不为none的属性值;
  • 绝对定位元素:position (absolute、fixed)
  • display为: inline-block、table-cells、flex
  • overflow 除了visible以外的值 (hidden、auto、scroll)

二、 BFC的特性及应用


接下来介绍BFC常见的特性和应用,这一部分 在解释原因时,会用到上文的布局规则和触发条件,所以需要注意一下。

1、两个相邻的普通流中的块元素垂直方向上的 margin会折叠

效果图是:

根据BFC规则的第3条:

盒子垂直方向的距离由margin决定,属于同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。

上文的例子之所以发生外边距折叠,是因为他们同属于 body这个根元素,所以我们需要让 它们不属于同一个BFC,就能避免外边距折叠:

效果图是:

2、BFC可以包含浮动的元素(清除浮动)

正常情况下,浮动的元素会脱离普通文档流,所以下面的代码里:

外层的div会无法包含 内部浮动的div,效果见下图:

但如果我们 触发外部容器的BFC,根据BFC规范中的第4条:计算BFC的高度时,浮动元素也参与计算,那么外部div容器就可以包裹着浮动元素,所以只要把代码修改如下:

就可以完成以下效果:

3、BFC可以阻止元素被浮动元素覆盖

先看一个例子:

效果图是:

之所以是这样,是因为上文的规则5: 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此;

所以要想改变效果,使其互补干扰,就得利用规则6 :BFC的区域不会与float重叠,让 <div class="main"> 也能触发BFC的性质,即:

通过这种方法,就能用来实现两列的自适应布局。

三、简要介绍IFC


IFC布局规则:

1 框会从包含块的顶部开始,一个接一个地水平摆放。2 摆放这些框时,它们在水平方向的 内外边距+边框 所占用的空间都会被考虑;  在垂直方向上,这些框可能会以不同形式来对齐:  水平的margin、padding、border有效,垂直无效。不能指定宽高; 3 行框的宽度是由包含块和存在的浮动来决定;  行框的高度由行高来决定。

原文作者:ygming

原文链接:https://segmentfault.com/a/1190000012993668

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-03-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯NEXT学位 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 之前一直听到有人提到 CSS里的BFC,正巧在 IFE的练习里遇到了外边距折叠的问题,所以正好弄清楚BFC的机制。
  • 一、 什么是 BFC
  • 和之前所有博文一样,还是先从What的角度开始介绍,由浅入深的理解BFC。
  • 二、 BFC的特性及应用
  • 接下来介绍BFC常见的特性和应用,这一部分 在解释原因时,会用到上文的布局规则和触发条件,所以需要注意一下。
    • 1、两个相邻的普通流中的块元素垂直方向上的 margin会折叠
      • 3、BFC可以阻止元素被浮动元素覆盖
        • 先看一个例子:
        • 三、简要介绍IFC
        • IFC布局规则:
          • 原文作者:ygming
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档