做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态定位,对于这几种耳熟能详的定位在这里我们不必花费时间去讨论,我们今天要关注的是另一种神奇的定位,也就是所谓的bfc,对于前面几个定位,都会或多或少产生一些后遗症,影响它的兄弟元素的位置和父元素产生高度塌陷,这个不仅会影响内部的元素,还会对外部的元素产生影响,经常会弄得很头疼,往往为了移动某一个很小的元素,就得影响整个div甚至页面板块的布局,试想一下有没有一种方法能够让我们把一些元素放在一个div中包裹起来,在接下来的布局中使得这个被包裹着的块不受外界的影响,也不会影响外面的元素呢?在这里我们的bfc就能实现这个功能,下面我就细说这个神奇的东西。

对于上面谈到的因为定位而产生的后遗症,我们也有相应的解决方法,但是就比较复杂,也存在诸多的不确定因素,导致我们在布局中出现这样那样的问题,说起清除浮动,大家肯定会想起 clear: both ,的确,这是 CSS 中清除浮动的属性,clear 有 both/left/right/none/inherit 几个属性值,分别代表在元素左右两侧不允许出现浮动元素/左侧不允许出现浮动元素/右侧不允许出现浮动元素/不清除浮动/继承父元素的值。

还有一个经典的方法就是使用空div的方法,起到一个占位符的作用,这个方法虽然能够解决存在的问题,但是在一定情况下也影响了代码的质量,使得代码的可读性下降,这违背了结构与表现分离的原则,还有就是overflow的方法,在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ,可以闭合浮动。另外在 IE6 中还需要触发 hasLayout ,在这里对于haslayout暂且不提,我们将在下一篇中专门讲到,这个方法相对前者更加方便,也更加符合语义要求,只是 overflow 并不是为了闭合浮动而设计的,因此当元素内包含会超出父元素边界的子元素时,可能会覆盖掉有用的子元素,或是产生了多余的滚动条。这也是在 overflow 方法诞生后依然需要寻找更佳方法的原因。看来我们还是得继续寻找新的适合的方法,对于有些资料上提到了使用为元素:after 在这里我们不进行深讲。

接下来我们就进入正题,来解开bfc的真实面纱,首先明确一个概念那就是bfc的含义,BFC (Block Formatting Contexts) 即块级格式化上下文,从样式上看,它与普通的容器没有什么区别,但是从功能上,BFC 可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性,例如可以包含浮动元素,上面的第二类方法(如 overflow 方法)就是触发了父元素的 BFC ,使到它可以包含浮动元素,从而防止出现高度塌陷的问题。看来这神器还真满足了我们之前谈到的各个问题,这个bfc都能为我们完美解决。

既然提到了bfc,那我们就会在页面中进行使用,接触过javascript原生代码的都清楚我们js中的事件模型,首先要发生某个响应,我们就得触发相应的事件,调用事件处理程序来进行处理,在css中也是一样,既然要使用bfc,我们还是需要对其进行触发,下面就是常见的触发该事件的方法:

触发 BFC 的条件如下:

  • 浮动元素,float 除 none 以外的值
  • 绝对定位元素,position(absolute,fixed)
  • display 为以下其中之一的值 inline-blocks,table-cells,table-captions
  • overflow 除了 visible 以外的值(hidden,auto,scroll)

在 CSS3 中,BFC 叫做 Flow Root,并增加了一些触发条件:

  • display 的 table-caption 值
  • position 的 fixed 值,其实 fixed 是 absolute 的一个子类,因此在 CSS2.1 中使用这个值也会触发 BFC ,只是在 CSS3 中更加明确了这一点。

  既然触发了bfc,我们还是得看它是如何的工作的,那这就需要明确bfc的几个基本特性,

  首先就是BFC 会阻止外边距折叠,就是在我们平常的布局中,、两个相邻的div或者块级元素的边距会重合在一起,这一点在使用bfc的时候就不会出现,因为它会组织外边距的重叠。

  然后就是BFC 可以包含浮动的元素,主要体现在bfc会自动适应其中所包含的子元素的变化,这一点非常酷,它会随着子元素的大小改变而改变,

  最后一点就是 BFC 可以阻止元素被浮动元素覆盖主要体现在:当浮动元素的块状兄弟元素会无视浮动元素的位置,尽量占满一整行,这样就会被浮动元素覆盖,以上三点就是bfc的三个基本特征,关于bfc的基础知识就介绍到这里为止,更多更深的知识是需要在实践中去感知的。

BFC块级格式化上下文简述的更多相关文章

  1. CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  2. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  3. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  4. 我理解的BFC(块级格式化上下文)

    BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...

  5. BFC(块级格式化上下文)

    转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...

  6. BFC(块级格式化上下文)笔记

    BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...

  7. BFC(Box,Formatting,Context) —— 块级格式化上下文

    Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...

  8. css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  9. 详解块级格式化上下文(BFC)

    相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...

随机推荐

  1. MSBuild 教程(2)

    如果你没有看过第一部分教程,请先看完后再回到这里来继续我们的第二部分. 我们下一步的工作是发布我们的网站,也就是创建Publish target. 为了能使我们的target工作,我们需要给它传递两个 ...

  2. vs2015

    1.关闭诊断工具 vs2015在程序启动之后,自带了内存和cpu使用情况查看的诊断工具. 不喜欢这个,直接点击诊断工具右上角的关闭按钮 2.解决方案资源管理器 程序启动之后,解决方案资源管理器,被收缩 ...

  3. ClassNotFoundException

    在 java socket 通信,使用 ObjectInputStream 的 readObject 时, 出现了问题. ServerProject 问题描述是这样的: java.lang.Class ...

  4. (转载)mysql_query( )返回值

    (转载)http://hi.baidu.com/tfbzccqceabfhyd/item/bd01db9f8995204af04215e4 调用mysql_query( ),当查询操作是update. ...

  5. Ajax的简单小例子

    1.首先下载ajax.dll,一个百度一下都有下载的!自行查找. 2.把ajax.dll导入到工程.右键工程-->添加引用--->浏览,找到下载好的ajax.dll文件,点击确定,这时候在 ...

  6. StringBuilder字符串缓冲区

    JDK1.5出现StringBuiler:构造一个其中不带字符的字符串生成器,初始容量为 16 个字符.该类被设计用作 StringBuffer 的一个简易替换,用在字符串缓冲区被单个线程使用的时候( ...

  7. h2 database

    java -cp h2-1.4.187.jar org.h2.tools.Shell -url jdbc:h2:file:~/.h2/hzhssh -user sa 如果有个数据库的文件名为:hzhs ...

  8. 10 个用于收集硬件信息的 Linux 命令

    知道自己的Linux系统运行在什么样的硬件组件上总是好的,因为如果涉及到在系统上安装软件包和驱动程序的话,这将有助于你处理兼容性问题. 因此,下面我们将给出一些非常有用的命令,它们可以帮助你提取你的L ...

  9. ArrayList and LinkedList

    ArrayList and LinkedList List代表一种线性表的数据结构,ArrayList则是一种顺序存储的线性表.ArrayList底层采用数组来保存每个集合元素,LinkedList则 ...

  10. 用户体验设置和UI设计的10个不同点

    在这个技术的世界,UX和UI这两个词条在差点儿全部公司都非常流行,不管大小,都在寻找招聘UX/UI设计师. 这两个缩写词条使得整个技术工业为之疯狂,由于它们是最先进的前沿技术. 那这两个词条实际上是什 ...