bfc定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置.Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也是如此.BFC的区域不会与float box重叠,常用来清除浮动和布局.BFC就是页面上的一个隔离的独…

CSS之BFC.IFC.FFC and GFC 什么是FC? BFC(Block Formatting Contexts) BFC的布局规则: 如何生成BFC: IFC(Inline Formatting Contexts) FFC(Flex Formatting Contexts) GFC(GridLayout Formatting Contexts) 什么是FC? FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一…

首先第一个,什么是BFC? BFC的全称叫Block  Formatting  Context   (块级格式化上下文)BFC是css中隐含属性,开启BFC后元素会变成一个独立的布局环. 简单来说,它是一个独立渲染的区域,在这个区域的元素和外部的不相干,即使子元素怎么写怎么设置也不会超出父元素的内部,举个简单例子这个独立的区域相当于个房间,里面的人出不去外边的人进不来.         使用方法(推荐) overflow属性的auto / scroll / hidden这三个属性都可以让父元素生…

BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-blocks , table-cells , table-captions ,和overflow 的值不为 visible 的元素,(除了这个值已经被传到了视口的时候)将创建一个新的 块级格式化上下文 . 上面的引述几乎总结了一个 BFC 是怎样形成的.但是让我们以另一种方式来重新定义以便能更好的去理解.一个…

什么是BFC BFC是什么并不重要.重要的是开启它干嘛?以及如何开启它 根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块级 格式化 环境)简称BFC 开启元素的BFC后,元素会有如下特性: 1.父元素的垂直外边距不会和子元素重叠. 2.开启BFC的元素不会被浮动的元素所覆盖. 3.开启BFC的元素可以包含浮动的子元素. 在以下情况下,会自动开启BFC: 1.设置元素浮动(此方法,虽然可以撑开父元素,但是会导致父元素的宽度丢失,也会导致下边的元…

何为BFC BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. BFC规则 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠. 每个元素的margin box的左边, 与包含块border box的左边相接触(对…

1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性决定,box的类型分为block-level box 和inline-level box(不包括css3的时候).不同类型的box参与不同类型的formatting context布局. Block-level elements are those elements of the source do…

CSS中的IFC和BFC入门   提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点. 首先从概念入门,B是Block,I是inline,F [Formatting] C [context].一句话概括就是格式化上下文一个是块级,一个是行级. BFC有如下规则: 内部的盒子会在垂直方向,一个个的放置: BFC是页面上的一个隔离的容器 属于同一个BFC的 两个相邻Box的 上下mar…

浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的块级格式化上下文. 在一个块级格式化上下文里,盒子从包含块的顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的.两个相邻的块级盒子的垂直外边距会发生叠加. 在块级格式化上下文中,每一个盒子的左外边缘(margin-left)会触碰到容…

CSS当中BFC介绍 在前端当中,我们都知道标准文档流,我们在开发的时候,经常会碰到block和inline.而下文要说到的BFC就是对块级盒子的格式化.当然block级别的盒子是BFC,那么inline级别的盒子也同样存在ifc. 介绍 首先,我们先来看一下FC的概念. FC是Formatting Context的缩写,表示页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用. 而BFC的概念如下: BFC:块级格式化上下文,它是指一个独立的块级…

前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白帽子的Web安全技能 从源头消除安全隐患 打造安全无虞的Web应用> >> >>  前言 之前一直听到有人提到 CSS里的BFC,正巧在 IFE的练习里遇到了外边距折叠的问题,所以正好弄清楚BFC的机制. (参考来源 见文末的 Reference) 一 什么是 BFC 和之前所有…

CSS中有个重要的概念BFC,搞懂BFC可以让我们理解CSS中某些原本看似诡异的地方. 简介 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流.普通流三种.而普通流其实就是指BFC中的FC.FC(Formatting Context),直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用.常见的FC有BFC.IFC,还有GFC和FFC. BFC(Block Formatting Context)块级格式化…

什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block Formatting Context,块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. BFC的约束规则 内部的BOX会在垂直方向上一个接一个的放置: 垂直方向上的距离由margin决定.(完整的说法是:属于同一个BFC的俩个相邻的BOX的ma…

CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关. BFC的生成 CSS2.1规定满足一下条件之一就会生成BFC: 根元素 float的值不为none overflow的值不为visible position的值为fixed或absolute display的值为table-cell / table-caption / i…

是的,是你的BFC - CSS中常用     是的,是你的BFC - CSS中常用 CFC 全称:(Block Formatting Contexts)含义是块级格式化上下文),就是一个块级元素的渲染显示规则 一.简易理解.定义 可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,同时外面的元素也不会影响我们容器内的子元素. 二.BFC布局规则 内部的盒子会在垂直方向,一个个地放置: 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 : 每个元素的左边,…

我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用.常见的FC有BFC.IFC,还有GFC和FFC.BFC是block formatting context,也就是块级格式化上下文,是用于布局块级盒子的一块渲染区域. 上面这段话看看就好,是我从其它地方复制的.简单来说,BFC 实际上是一…

首先本文中介绍的 BFC. IFC.GFC.FFC 均为 CSS 中常见问题的解读,如没兴趣,可以绕道了. 然后在介绍这么多的 *FC 之前,我们得了解 一下 Box 和 Formatting Context 的概念 Box: css布局的基本单位,也就是我们常说的 盒子模型 盒子模型:它包括:边距[margging],边框[border],填充[padding],和实际内容[width.height] 然后 元素的类型 和 display 属性 会决定这 Box 的类型.不同类型的 Box 会…

温故知新,巩固基础 从 FC 开始 FC,Formatting Context,格式化上下文,是 W3C CSS2.1 规范中的一个概念,定义的是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,及和其他元素的关系和相互作用. 常见的FC有:BFC(Block Formatting Context | 块级格式化上下文)和IFC(Inline Formatting Context | 行内格式化上下文). 其次还有:GFC(GridLayout Formatting Conte…

先说说FC,FC的含义就是Fomatting Context.它是CSS2.1规范中的一个概念. 它是页面中的一块渲染区域.而且有一套渲染规则,它决定了其子元素将怎样定位.以及和其它元素的关系和相互作用.BFC和IFC都是常见的FC. 分别叫做Block Fomatting Context 和Inline Formatting Context. BFC BFC(Block Formatting Context)叫做"块级格式化上下文".BFC的布局规则例如以下: 1.内部的盒子会在垂直…

What:了解该知识点的概念,本质以及有关牵扯到的相关知识概念 BFC这个东西说常见的话你可能不觉得,但是你肯定会常用,也许你在用的时候也没想到BFC这东西.网上也有很多写这些东西的文章,但是自己写一遍印象更深一点. 首先我们看看w3c对BFC是怎么定义的: http://www.w3.org/TR/CSS2/visuren.html#block-formatting Floats, absolutely positioned elements, block containers (such a…

一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染.让我们看看有哪些盒子: block-level b…

CSS中各种布局的背后,实质上是各种*FC的组合.CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC. 盒模型(BoxModel) 上图为W3C标准盒模型,另外还有一种IE盒模型(IE6以下),唯一的区别就是:前者width= content,后者width= content + padding + border 若要将IE盒模型转换为标准盒模型,需要在文档顶部加上<!DOCTYPEhtml>声明:很有意思的是,后来CSS3中也增加了box-sizing属性,box-sizi…

1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性决定,box的类型分为block-level box 和inline-level box(不包括css3的时候).不同类型的box参与不同类型的formatting context布局. Block-level elements are those elements of the source do…

在CSS的最后一个博客中,将学习整理一些CSS中的重要概念,对这些重要概念的掌握,将对CSS的认识十分重要. 了解这些概念对深入理解CSS的本质十分重要:(1)包含块containing block (2)BFC和IFC (3)层叠上下文 如果要真正地掌握CSS,一定要对此认真研读.一定认真研读.一点认真研读(重要的事情说三遍). 1:包含块 我们都知道,如果有两个div,一个是父元素,另外一个是子元素,父元素会决定子元素的大小和定位.包含块是什么呢?简单来说,就是可以决定一个元素大小和定位的元…

前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些FC(Forrmatting Context)你都得知道,而且必须得做到像肯德基这样印象深刻.下面我将会带大家一起揭开这些FC的真面目,如果你已经了解的请奖励自己一顿肯德基-(注意文明用语,这里别用语气词) FC的全称是:Formatting Contexts,译作格式化上下文,是W3C CSS2.…

BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-level box的: 在一个块级排版上下文中,盒子是从包含块顶部开始,垂直的一个接一个的排列的. 相邻两个盒子之间的垂直的间距是被margin属性所决定的,在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的 咱们看个例子: 代码如下: 在图中我们发现…

1.inline-block 存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生            请看中间的空隙. 为什么会产生这个空隙呢?? 怎么解决呢? 方案1:使子元素在html中无缝排列 <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <!---变成下面的----> <ul>…

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时…

深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况 第一部分:margin--基础知识 要介绍margin的基础知识,我们不可回…

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什…