HTML笔记 ·

什么是BFC

BFC 就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。那么首先先来说一下常见的三种控制布局的定位方案

布局方案

1.普通流布局
在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。

2.position定位

position定位有五种方式,分别是:static(静态布局,默认)、relative(相对布局,不影响其外部文档流)、absolute(脱离当前文档流,相对于其最近的absolute定位或relative定位)、fixed(相对于浏览器定位,同样会脱离文档流)、sticky(粘性布局)。

position属性中最有意思的就是sticky了,所以想在这里多说一点。设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点:

  • 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
  • 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top:50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
  • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量

这个东西很好的应用就是导航栏吸顶效果,但是比较蛋疼的是这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

float浮动布局

在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。

BFC解释

BFC全称是Block Formatting Contexts (块级格式化上下文),属于是普通流布局定位方式。具有BFC特性的元素可以理解为一个完整的盒子,这个盒子不会产生塌陷,无论内部元素如何变化,其外部元素不受影响

如何触发BFC

只要元素满足下面任一条件即可触发 BFC 特性:

  • body 根元素
  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC的应用

1.BFC 可以包含浮动的元素(清除浮动)

一般情况下,我们在写了float之后,父元素会塌陷,如果不想让父元素塌陷的话,我们一般会写一个清除浮动的元素或伪类,但是BFC却无需这样:

<div style="border: 1px solid #000;overflow:hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

什么是BFC
如此就可以做到不用特意清除浮动,父元素也不会塌陷。

2.BFC 可以阻止元素被浮动元素覆盖

我们来看下面一个例子

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

如此形成的效果如下图所示
什么是BFC

左浮动的元素会盖住未浮动元素一部分区域,但是文字不会被覆盖,形成了文字环绕的效果,如果不想这样,我们可以采用BFC的方式,和上面的例子相同,添加一个overflow:hidden来触发BFC即可

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee;overflow:hidden">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

什么是BFC

这个效果可以应用于两栏布局,效果还是不错的。

参与评论