BFC & IFC

BFC是w3c css2的一个规范概念:规定了子元素如何定位,以及和其他子元素的关系和项目作用
是一个独立的布局环境,不受外界影响,在一个BFC中,所有块盒和行盒都是垂直沿着父元素边框排列的;

规则:
垂直方向的距离有margin决定,同一个BFC里的盒子相邻的margin会重叠

BFC 指的是块级格式化上下文,一个元素形成了 BFC 之后,那么它内部元素产生的布局不会 影响到外部元素,外部元素的布局也 不会影响到 BFC 中的内部元素。一个 BFC 就像是一个隔离区域,和其他区域互不影响。 一般来说根元素是一个 BFC 区域,浮动和绝对定位的元素也会形成 BFC,display 属性的值为 inline-block、flex 这些 属性时也会创建 BFC。还有就是元素的 overflow 的值不为 visible 时都会创建 BFC。

如何形成BFC:
1.overflow != visible
2.position != static || position != relative
3.float != none
4.display的值是inline-block、table-cell、flex、table-caption或者inline-flex;

IFC 指的是行级格式化上下文,它有这样的一些布局规则:
(1)行级上下文内部的盒子会在水平方向,一个接一个地放置。
(2)当一行不够的时候会自动切换到下一行。
(3)行级上下文的高度由内部最高的内联盒子的高度决定。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基本慨念 内容区域(content)是包含元素真实内容的区域。它通常包含背景、颜色或者图片等,位于内容边界的内部,...
    晴天的晴q阅读 2,226评论 0 0
  • 一、 BFC的概念和应用 1. BFC的概念 BFC的全称是 Block Formatting Contexts,...
    忍不住的k阅读 1,218评论 0 0
  • BFC是什么 BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范...
    南场41号阅读 374评论 0 1
  • BFC与IFC 在解释BFC之前,先说一下文档流。定义:从左到右,从上至下的布局,并且符合html中标签的本身含义...
    我向你奔阅读 357评论 0 0
  • BFC(Block formatting contexts) BFC又称“块格式化上下文” 一.布局规则: 1.B...
    WANG_M阅读 259评论 0 0