BFC

  BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。

  BFC的生成

  既然上文提到BFC是一块渲染区域,那这块渲染区域到底在哪,它又是有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

  • 根元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute或fixed

 一般,我们使用overflow=hidden来触发

  BFC的约束规则

 浏览器对于BFC这块区域的约束规则如下:

  • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
  • 生成BFC元素的子元素中,每一个子元素做外边距与包含块的左边界相接触,(对于从右到左的格式化,右外边距接触右边界),即使浮动元素也是如此(尽管子元素的内容区域会由于浮动而压缩),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。

  有道友对它做了分解,我们直接拿来:

  1. 内部的Box会在垂直方向上一个接一个的放置
  2. 垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关。)
  3. 每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的高度时,浮动子元素也参与计算
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

  BFC在布局中的应用

  上面说了那么多,那BFC究竟有何用处,毕竟再好的东西也要为我所用才行。

  防止margin重叠:

  同一个BFC中的两个相邻Box才会发生重叠与方向无关,不过由于上文提到的第一条限制,我们甚少看到水平方向的margin重叠。这在IE中是个例外,IE可以设置write-mode。下面这个demo来自寒冬大神的博客

  

 margin水平重叠

  可以看到水平方向的margin发生了重叠。  

  要阻止margin重叠,只要将两个元素别放在一个BFC中即可(可以用上文提到的方式让相邻元素其中一个生成BFC)。阻止两个相邻元素的margin重叠看起来没有什么意义,主要用于嵌套元素。

 margin嵌套重叠

  此时div与ul之间的垂直距离,取div、ul、li三者之间的最大外边距。

  要阻止嵌套元素的重叠,只需让ul生成BFC即可(将上例中的注释去掉),这样div、ul、li之间便不会发生重叠现象。而li位于同一BFC内所以仍然存在重叠现象。

  需要注意的是:

  • 如果将为ul使用overflow:hidden的方式,ul生成BFC不应该再发生重叠现象可是我在chrome、firefox、ie上的测试结果都有发生重叠现象。
  • 如果为ul设置了border或padding,那元素的margin便会被包含在父元素的盒式模型内,不会与外部div重叠。《CSS权威指南》中提到块级正常流元素的高度设置为auto,而且只有块级子元素,其默认高度将是从最高块级子元素的外边框边界到最低块级子元素外边框边界之间的距离。如果块级元素右上内边距或下内边距,或者有上边框或下边框,其高度是从其最高子元素的上外边距边界到其最低子元素的下外边距边界之间的距离。

  浮动相关问题:

  使得父元素包含子元素,常见的方式是为父元素设置overflow:hidden或浮动父元素。根本原因在于创建BFC的元素,子浮动元素也会参与其高度计算,即不会产生高度塌陷问题。实际上只要让父元素生成BFC即可,并不只有这两种方式。

 包围浮动

  

  将上例中first中任意一项注释去掉都可以得到包围浮动的效果,其中overflow:hidden方式,与正常流最接近。

     

  关于清除浮动更详尽的方式,请大家参考这篇文章此处,dolphinX道友的博客简洁明了。

  多栏布局的一种方式

  上文提到的一条规则:与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式。

 多栏布局

  这种布局的特点在于左右两栏宽度固定,中间栏可以根据浏览器宽度自适应。

  

  IE中也有与BFC类似的概念成为hasLayout,一般用zoom:1来触发。

时间: 2024-12-12 06:20:07

BFC的相关文章

我对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

CSS 定位规则之 BFC

1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在进行盒子元素布局的时候, BFC 提供了一个环境, 在这个环境中按照一定规则进行布局不会影响到其它环境中的布局.比如浮动元素会形成 BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的.也就是说,如果一个元素符合了成为 BFC 的条件,该元素内部元素的布局和定位就和外

前端里神奇的BFC 原理剖析

以前在做自适应两栏布局的时候别人口中听到bfc这个词,于是看了各种关于bfc的文章,发现梦想天空介绍的不错,今天就在他的基础上润色一下. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formattin