正文

css之bfc和ifc

wjmm  2022-02-10  181

关键词：

BFC

BFC(Block Formatting Context) ------ 块级格式化上下文

w3c规范定义：浮动元素和绝对定位元素，非块级盒子的块级容器（inline-blocks，table-cells，table-captions），以及overflow的值不为visiable的块级盒子，都会为它们的内容创建新的BFC

相关定义：

block-level boxes（块级盒）------ 一个 block-level element块级元素 (‘display‘ 属性值为 ‘block‘, ‘list-item‘ 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中

block-formatting context（BFC） ------ 在这种布局下，盒子所在的containing block顶部起一个接一个垂直排列，水平方向上撑满整个宽度。

containing block（包含块）------ 盒子本身为其子孙建立containing block，用于计算内部盒子的位置、大小。

哪些元素会触发BFC：

　　1.根元素；

　　2.float属性不为none;

　　3.position为absolute或者fixed

　　4.display:inline-block,table-cell,table-caption,flex

　　5.overflow不为visible

BFC布局准则：

　　1.内部盒子在垂直方向上，一个个垂直放置

　　2.其不会和float(浮动元素)重叠

　　3.其垂直方向由margin决定，同一BFC布局下的元素的margin会重叠

　　4.在其布局下，子元素的内容不管怎么变化都不会影响到其外部元素

　　5.其高度会把float浮动元素的高度也算进去

　　6.元素的左边会和其包含的盒子的左边想接触，存在浮动也是如此

BFC的用途：

　　1.由于不会和浮动元素进行重叠，所以在自适应的两栏布局上起到了很好的作用。

　　2.可以清除内部的浮动

　　3.可以去margin重叠，因为不同BFC布局下的元素margin不会重叠

样例分析：

　　自适应两栏布局

 <div>
          <img class="leftbox" src="../images/none_new.png">
          <div class="rightbox">
             <h3>开发商</h3>
             <span>sdfsdfsdfsdfs士大夫撒旦法</span>
          </div>
     </div>

技术分享图片

　　左边图片左浮动，右边内容可以设置BFC布局，不会和浮动元素进行重叠。

　　广为流传的俩种两栏自适应布局：

.rightbox{overflow: hidden;*display:inline-block;} //缺点是hidden可能会隐藏溢出部分
.rightbox{display: table-cell;width:2000px;*display: inline-block;*width: auto}

IFC

IFC( Inline Formatting Contex) ------ 内联格式化上下文

w3c规范定义：从父元素的顶部开始，盒子一个接着一个横向排列，横向的margin/border/padding在这些盒子中都是有效的。盒子间可能通过不同的方式垂直对齐（底部、顶部、文字基线对齐）。

相关定义：

line box (行盒模型) ----- 根据块状容器内，每一行的多个内联元素共同生成一个行盒模型。当内联盒子的宽度超过line box,内联盒子会被分解成几个盒子，然后分布在几个line box里面，如果内联盒子不能被分解（例如：单词或者white-space:nowrap），它就会超过line-box。

影响布局的css:

　　1.font-size

　　2.line-height

　　3.height

　　4.vertical-align

css布局的各种fc简单介绍：bfc，ifc，gfc，ffc

什么是FC？FormattingContext，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。BFC什么是BFCBlockFormattingContext，块级格式化上下文，一个独立的块级渲染区... 查看详情

css之bfc

...器，容器里面的元素不会在布局上影响到外面的元素。在CSS3中。BFC叫做FlowRoot。在CSS2.1中。有三种定位方案——普通流（NormalFlow），浮动（Float）和绝对定位（AbsolutePositioning）。（1）怎样触发BFC？下列情况将创查看详情

css之bfc

　　　　1，定义　　BFC为块级格式化上下文，也就是一块区域内的封闭空间，里面元素无论怎么样，都不会影响外部元素。2，触发条件html根元素display的值为inline-block、table-cell和table-caption中的任何一个position的值不为relative和st... 查看详情

前端的bfcifcgfc和ffc

什么是BFC、IFC、GFC和FFCCSS2.1中只有BFC和IFC,CSS3中才有GFC和FFC。FC的全称是：FormattingContexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系... 查看详情

css3与页面布局学习总结——bfc定位浮动7种垂直居中方法

一、BFC与IFC1.1、BFC与IFC概要BFC（BlockFormattingContext）即“块级格式化上下文”，IFC（InlineFormattingContext）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必... 查看详情

css3bfc定位浮动7种垂直居中方法

一、BFC与IFC1.1、BFC与IFC概要1.2、如何产生BFC1.3、BFC的作用与特点二、定位2.2、relative2.3、absolute2.4、fixed2.5、z-index属性2.6、菜单2.7、:target伪类三、浮动3.1、float取值3.2、float的特性3.3、清除浮动3.3.1、清除外部浮动3.3.2、清除内部... 查看详情

bfc布局与ifc布局以及普通文档流布局(代码片段)

BFC布局BFC(BlockFormattingContext)块级格式化上下文。它是一个独立的渲染区域。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。块级元素：父级（是一个块元素）内容：子元素ÿ... 查看详情

深入理解css之bfc

BFC的定义BFC的全称是blockformattingcontext（块状格式化上下文），当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部元素的变化也不会影响到BFC内部元素，这就跟结界一样，你可以理解为有一个... 查看详情

深入理解css之bfc

bfc

一、BFC(blockformattingcontext)Formattingcontext是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formattingcontext有Blockfomattingcontex... 查看详情

css之bfc机制

...formattingcontent,格式化上下文；是web页面中盒模型布局中的css渲染模式，是一个独立的渲染区域或说一个隔离的独立容器。二，形成条件1，浮动元素，float除none以外的值。2，定位元素，position(absolute，fixed)3,display为inline-block,table-c... 查看详情

什么是bfcifcgfc和ffc

bfc布局与ifc布局以及普通文档流布局(代码片段)

css常见样式总结之水平垂直居中方案及bfc小结

平时写CSS样式不注意总结，用的时候写是会写但具体应用场景和组合方式一不小心就混淆，导致效率不高，还要借助文档，本文针对CSS常用样式水平垂直居中解决方案进行总结，也便于自己以后复习，好记性不如烂笔头。针对BFC... 查看详情

深入理解bfc

在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formattingcontext的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规... 查看详情

整理css之bfc原理

首先回顾下CSS常出现的几个样式问题1当子元素添加上边距时，父元素也会向下移动解决方法:给子元素添加display:inline-block;或者用父元素的padding-top代替给可以2子元素浮动后，父级元素检测不到其高度3当元素浮动后，兄弟元素的... 查看详情

整理css之bfc原理

bfc布局

...定其子元素如何布局及与其他元素的关系和作用。FC分为BFC、IFC、GFC和FFC，其中BFC(blockformattingcontext)块级格式化上下文BFC特点1.内部的box会在垂直方向上，一个接一个地放置2.box垂直方向的距离由margin决定，查看详情