BFC与CFC

1、在创建了 Block Formatting Context 的元素中,其子元素按文档流一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。

根据 CSS 2.1 8.3.1 Collapsing margins 第一条,两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。

根据 CSS 2.1 8.3.1 Collapsing margins 第三条,生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器。

2、在 Block Formatting Context 中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Context 。

3、Block Formatting Context就是页面上的一个隔离的独立容器,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。

4、根据 CSS 2.1 9.5 Floats 中的描述,创建了 Block Formatting Context 的元素不能与浮动元素重叠。

表格的 border-box、块级的替换元素、或是在普通流中创建了新的 block formatting context(如元素的 ‘overflow‘ 特性不为 ‘visible‘ 时)的元素不可以与位于相同的 block formatting context 中的浮动元素相重叠。

5 、当容器有足够的剩余空间容纳 BFC 的宽度时,所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。

6、 在 IE6 IE7 IE8 Chrome Opera 中,当 BFC 的宽度介于 "容器剩余宽度" 与 "容器宽度" 之间时,BFC 会显示在浮动元素的下一行;在 Safari 中,BFC 则仍然保持显示在浮动元素所在行,并且 BFC 溢出容器;在 Firefox 中,当容器本身也创建了 BFC 或者容器的 ‘padding-top‘、‘border-top-width‘ 这些特性不都为 0 时表现与 IE8(S)、Chrome 类似,否则表现与 Safari 类似。

时间: 2024-12-05 23:23:20

BFC与CFC的相关文章

是的,是你的BFC - CSS中常用

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

我对CSS中的BFC的理解

 1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下文)的缩写,它是W3C CSS 2.1 规范中的一个概念,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 2.什么情况下会创建BFC CSS规范说明了在下列这些情况下会创建新的block formatti

我理解的BFC

---恢复内容开始--- what: BFC:"Block Formatting Context" “块及格式化上下文”,文档给出的定义很多,自己觉得就是一句话,无论内部子元素怎么变化,都不会影响外部的元素. 表现原则: 内部的盒子会在垂直方向,一个接一个地放置. 盒子垂直方向的距离由margin决定.属于同一个BFC的两个相邻盒子的margin会发生重叠 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也

BFC与IFC

BFC与IFC 在我们做的网页上通常最重要的其中一点就是美观度,bfc他是一个块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 因为我现在天天在做网页了,之前没怎么关注bfc与ifc原理,以至于我做出来的网页有点偏差.所以要深刻学习以下知识. bfc:指它里面的子元素不会影响到外面的元素加上一个overflow:hilden该元素的子元素是一个bfc下面只要触发的是个bfc那么它

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

BFC的形成条件和特性分析

初学CSS时,我们学到很多有意思的CSS规则,比如外边距塌陷,还有浮动元素的一些特性等,其实这些规则背后都是BFC这个东西在控制,下面我们来看下BFC到底是什么. 什么是BFC BFC(Block formatting contexts),翻译过来就是块级格式化上下文,指的是一种上下文环境,我们暂且不管它为什么叫这么晦涩冗长的名字,先看看哪些情况能形成BFC,然后看看它有哪些特性,这样我们也就知道它是什么了.就像我们学习js的对象一样,了解一个对象的原型,以及它的属性方法,我们也就知道它是什么了

会触发BFC的根元素

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

inline-block BFC 边距合并

在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并? 首先,外边距的合并出现在垂直方向上,两个块级元素垂直外边距相邻时,两者的原外边距会合并成一个高度等于两者中较大的新外边距. 在正常的文档流下,没有边框,没有padding,但有外边距时,上下的margin会出现合并,高度等于两者中的较大者. 不让相邻元素外边距合并的方法: 加外边框,加padding: 父元素加overflow(不为visible); 父元素加display:inline-block; 父元素加float; 父

BFC与HasLayout的理解

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