css 之 BFC

CSS之BFC、IFC、FFC and GFC

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规范中的一个概念.它是页面中的一块渲染区域,并且有一…

理解CSS中BFC

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

CSS的BFC和hasLayout及其应用场景

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

1,定义 BFC为块级格式化上下文,也就是一块区域内的封闭空间,里面元素无论怎么样,都不会影响外部元素. 2,触发条件 html 根元素 display的值为 inline-block.table-cell和table-caption中的任何一个 position的值不为relative和static overflow的值为auto.scroll或者hidden float的值不为none 3,基本用途 1,去除margin重叠 BFC不会影响外面的元素,所以BFC元素肯定不会发生margin重…

理解css的BFC

BFC是CSS中一个看不见的盒子,(先理解CSS的盒子模型).它的页面渲染方式与普通流的盒子模型不同,它决定了其子元素将如何定位(所用属于BFC的box 都默认左对齐),以及和其他元素的关系和相互作用 .如何才能形成BFC盒模型呢? 1.float 属性值不为none: 2.position 属性值不为 static 和 relative: 3.display 属性为:table-cell || table-caption || inline-block || flex || inline-fl…

CSS之BFC详解

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

浏览器的差距、ie6 ie7 ie8、符号、html css、BFC、

1.浏览器的差距浏览器默认的字体是16px,谷歌的最小字体是12px,其他是10px 2.ie6.ie7.ie8. hack:就是针对不同的浏览器去不同的html,css样式,从而让各个浏览器能达到一致的渲染效果 html的hack:写在html的标签中 css的hack:写在css的样式中 3.符号 &it:< &ite; <= > > &gte; >= 4.html hack的写法 (1).<!--[if ite ie8]>…

前端精选文摘：css之BFC 神奇背后的原理（转载）

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

【HTML/CSS】BFC

块格式化上下文(Block formatting contexts) BFC是什么? 是Web页面中盒模型布局的CSS渲染模式.它的定位体系属于常规文档流. 至少满足条件之一: float 的值不为 none position 的值不为 static 或者 relative display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个 overflow 的值不为 visible 创建时可能…

总结下对我对于CSS中BFC的认知

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

我们常用，却容易忽视——CSS的BFC（Block formatting contexts）

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

CSS之BFC及其应用

BFC是Block Formatting Context的缩写,直译过来就是"块级格式化上下文".先不管它到底是什么,看一个例子: .parent{ border: 1px solid blue; } .children{ width: 100px; height: 100px; background: red; float: left; margin: 10px; } <div class="parent"> <div class="c…

一天搞定CSS：BFC布局与普通文档流布局比较--15

BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用关键词解释: 块级元素:父级(是一个块元素) 内容:子元素(是一个块元素) 其它元素:与内容同级别的兄弟元素相互作用:BFC里的元素与外面的元素不会发生影响 2.BFC触发方式 2.BFC的布局规则 3.普通文档流布局规则 4.代码演示 <!DOCTYPE html> <html> <head> &l…

css中bfc和ifc

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

CSS之BFC

BFC(Block Formatting Context,块格式上下文) 具有BFC特性的元素能够看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素. 在CSS3中.BFC叫做Flow Root. 在CSS2.1中.有三种定位方案--普通流(Normal Flow),浮动(Float)和绝对定位(Absolute Positioning). (1)怎样触发BFC? 下列情况将创建一个BFC环境: (a)浮动(元素的float非none) (b)绝对定位元素(元素的position…

css之BFC（block formmatting context）[格式化上下文]

一.定义: BFC就是一个黑盒子,可以保证盒子内部元素不管如何变化,都不会影响盒子附近的元素:它属于普通流.浮动.定位方案中的普通流. 二.触发条件: 1.body: 2.float(不包含none),position(不包含static); 3.display 为 inline-block.table-cells.flex 4.overflow(不包含visible) 三.BFC特性以及其应用: 1.同一个BFC盒子下面的2个元素的下外边距会发生折叠: 2.BFC元素可以包含浮动元素: 3.B…

CSS中BFC规则

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

html/css中BFC的开启、关闭、作用

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

html/css系列 BFC

本文详情:https://www.cnblogs.com/chen-... 第一种 BFC中的盒子对齐 <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="bo…

CSS基础 BFC的使用方法

BFC的作用和创建1.html标签是BFC盒子2.浮动元素是BFC盒子3.行内块元素是BFC盒子4.overflow属性值不为visible,如:auto.hidden...作用:1.清除浮动: 2.解决塌陷注意:display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell,是这个匿名的table-cell生成了BFC具体内容可以参考一下文章https://segmentfault.com/a/1190000013023485…

CSS中的BFC

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

CSS中的BFC解析

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…

十分钟复习CSS盒模型与BFC

css盒模型与BFC 本文为收集整理总结网上资源旨在系统复习css盒模型与bfc 节省复习时间阅读10分钟什么是盒模型每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padding.border.margin .png) 盒模型主要分两种标准盒模型 IE盒模型(怪异盒模型) 两者的区别: 标准盒模型的宽高则为内容区域的宽高 IE盒模型则宽高为 border + padding + 内容区如何切换盒子模型? 使用box-sizing来进行切换 border-box 切…

关于由CSS2.1所提出的的BFC的理解与样例

今天在这里谈谈css中BFC.“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.满足以下任何一条件,即可形成“BFC”. 1.float的值不为none. 2.overflow的值不为visible. 3.display的值为table-cell, table-caption, inline-block中的任何一个. 4.position的值不为relative和static.…

【转】关于Block Formatting Context－－BFC和IE的hasLayout

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

学习BFC

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

轻谈BFC

BFC 定义 CSS2.1的定义 Block formatting contexts 9.4.1 Block formatting contexts Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' oth…

【css 之 BFC】的更多相关文章