BFC块级格式化上下文简述

时间:2023-03-08 17:32:10
BFC块级格式化上下文简述

做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态定位,对于这几种耳熟能详的定位在这里我们不必花费时间去讨论,我们今天要关注的是另一种神奇的定位,也就是所谓的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的基础知识就介绍到这里为止,更多更深的知识是需要在实践中去感知的。