BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提供了一个独立布局的环境,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等.元素如果创建了BFC,那么BFC决定了如何对其内容进行定位,以及它与其他元素的关系和相互作用. 在这个环境中按照一定规则进行布局不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动…

原文 简书原文:https://www.jianshu.com/p/20c32c367b63 什么是格式化上下文(formatting contexts) Formatting context是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系.相互作用.格式化上下文指的是初始化元素定义的环境.包含两个要点,元素定义的环境和初始化. 在 CSS 中,元素定义的环境有两种,一种是块格式化上下文( Block form…

fomatting context 引言 主要讲解的是BFC上下文 本文是查看 史上最全面.最透彻的BFC原理剖析 的笔记 所以不会详解BFC, 只是记录学习心得, 以及重要规则避免原文失效 简介 Formatting context是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系.相互作用 Formatting context Block fomatting context (BFC) Inline form…

原文:https://www.cnblogs.com/elcarim5efil/p/4745796.html   格式化上下文 格式化上下文( formatting contexts )├── 块级格式化上下文( Block formatting contexts )( BFC )├── 行内格式化上下文( Inline formatting contexts ) ( IFC )├── 自适应格式化上下文( Flex Formatting Contexts )( FFC )└── 网格布局格式化…

CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素默认为普通流定位. 浮动:浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左或右偏移,效果与文本环绕相似. 绝对定位:元素会脱离普通流,因此绝对定位元素不会对其兄弟元素产生影响(与float不…

Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内 部的Block-level Box如何布局,并且与这个区域外部毫不相关. BFC布局规则: (1)内部的Box会在垂直方向,一个接一个地放置 (2)Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 (…

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格式化上下文: 根元素或包含根元素的元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 absolute 或 fixed) 行内块元素(元素的 display 为 inline-block) 表格单元格(元素的 display为 table-cell,HT…

在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素默认为普通流定位. 浮动:浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左或右偏移,效果与文本环绕相似. 绝对定位:元素会脱离普通流,因此绝对定位元素不会对其兄弟元素产生影响(与float不同),元素的具体位置由坐标位置决定. BFC是属于普通流,因此它对兄弟元素也不产生影响. 一…

虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 --- 布局的时候,BFC提供了一个环境,一些HTML元素在这个环境中按照一定规则进行布局,而这个BFC提供的环境中的元素不会影响到其它环境中的布局.为了让我们有个感性的认识,举个不太合适的例子.你可以把一个BFC想象成大的集装箱,这个集装箱里装的货物就是一些HTML元素.在现实生活中为了避免不同人的货…

今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context  ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只聊聊技术. 1.什么是Block formatting context? Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局,就是说处在于不同Block Formatting Context环境中的…

深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识. css布局篇已经讲个2篇了,前面我们深入讲解了 盒模型与box-sizing, 元素分类,行框,定位与浮动等知识点.今天呢,我们把css布局篇做一个结尾,最后讲解下margin的问题和格式化上下文. 一.margin的问题 margin问题主要在垂直方向上.在垂直方向上,元素…

在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性. 但在进一步说明 BFC 特性之前,Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要地位的概念——定位方案.定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Norma…

转自:http://kayosite.com/block-formatting-contexts-in-detail.html 在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性. 但在进一步说明 BFC 特性之前,Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model)…

定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一下. 普通流(Normal Flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行, 除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在…

CSS的两种格式化上下文   文章包含很多个人理解,如果错误,欢迎指出~   在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的盒子模型.三种元素类型.   本文具体解读了CSS针对block-level元素和inline-level元素设计的两种格式化上下文:BFC(Block Formatting Context)和IFC(Inline Formatting Context),它们规定了block-level元素和inl…

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素 根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签…

什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用.常见的FC有BFC.IFC,还有GFC和FFC.BFC是block formatting context,也就是块级格式化上下文,是用于布局块级盒子的一块渲染区域 触发条件 满足下列条件之…

那么如何触发BFC呢? float 除了none以外的值 overflow 除了visible 以外的值(hidden,auto,scroll ) display (table-cell,table-caption,inline-block) position(absolute,fixed) fieldset元素 BFC的特性: 1)块级格式化上下文会阻止外边距叠加 当两个相邻的块框在同一个块级格式化上下文中时,它们之间垂直方向的外边距会发生叠加.换句话说,如果这两个相邻的块框不属于同一个块级格…

     最近在学习BootStrap框架,发现里面清除浮动的类 .clearfix 跟平时自己用的不太一样.它的样式是这样的: .clearfix:before { content: " "; display: table; } .clearfix:after { content: " "; display: table; clear: both; } 用:befor和:after伪元素清除浮动是我熟悉的,不过一般我使用display:block而非display…

w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with eac…

一.块级格式化上下文(BFC) 1.什么是块级格式化上下文? Block Formatting Contexts (BFC,块级格式化上下文)就是一个块级元素 的渲染显示规则 (可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素) 2.触发BFC的条件如下: 根元素 float的值不为none. overflow 除了 visible 以外的值(hidden,auto,scroll) display的值为table-cell, table-caption, inlin…

转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮…

转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式化范围". 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布…

什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式化模型. 视觉格式化模型 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制,它也是CSS中的一个概念. 视觉格式化模型定义了盒(Box)的生成,盒主要包括了块盒.行内盒.匿名盒(没有名字不能被选择器选中的盒)以及一些实验性的盒(未来可能添加到…

不会JS中的OOP,你也太菜了吧!(第一篇)   一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合用在安全的环境中和防止数据被其它程序改变的时候) 二.开始创建对象吧 <1>: 首先来看两种最基本的创建对象的方法 1> 使用Object创建对象 var o = new Object(); o.sname = 'JChen___1'; o.showName = function(){ re…

相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规范,把和块级格式化上下文有关的资料整理了出来. 先介绍一下普通流,普通流就是我们口中常说的文档流.在CSS 2.1的规范中有两段关于普通流的描述: Normal flow. In CSS 2.1, normal flow includes block formatting of block-leve…

原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatting 9.4 Normal flow Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level bo…

 一:BFC 是什么      MDN解释: A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other,一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分,它是一个区域,块级布局,相互…

BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚.于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS…

转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮…