2019-06-05 17:36:43
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属性有以下几个特点:
这个东西很好的应用就是导航栏吸顶效果,但是比较蛋疼的是这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。
float浮动布局
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。
BFC全称是Block Formatting Contexts (块级格式化上下文),属于是普通流布局定位方式。具有BFC特性的元素可以理解为一个完整的盒子,这个盒子不会产生塌陷,无论内部元素如何变化,其外部元素不受影响
只要元素满足下面任一条件即可触发 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>
如此就可以做到不用特意清除浮动,父元素也不会塌陷。
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的方式,和上面的例子相同,添加一个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>
这个效果可以应用于两栏布局,效果还是不错的。