专栏首页OECOM什么是BFC

什么是BFC

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属性有以下几个特点:

  • 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
  • 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了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>

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

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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 去除inline-block元素间间距

    将代码执行之后我们会发现这个宽度为900的div居然放不下这三个宽度为300的a标签。原因在于他们之间有一个间隔。下面我来说一下如何去除这个水平间距和垂直间距。

    无邪Z
  • 显示3D文字且左右摆动效果

    图片的进出特效前面介绍过不少,但是没有介绍过文字的特效,今天我来给大家介绍一种特效。相信大家在大街上都看到过店铺的招牌,有的招牌的文字为3D效果,并且后面还能看...

    无邪Z
  • JavaScript实现单向链表数据结构

    学习过数据结构的人都应该清楚,链表是一种动态的数据结构,这意味着我们可以从中任意添加或移除项,它会按需进行扩容。链表存储有序的元素集合,但不同于数组,链表中的元...

    无邪Z
  • 理解CSS布局和块格式化上下文

    块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与...

    D2
  • 详解 清除浮动 的多种方式(clearfix)

    版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn.ne...

    FEWY
  • css学习--css基础

    学习慕课网笔记,课程:http://www.imooc.com/code/2024 1.css选择器 子选择器:parent>child 子选择器是指选择pa...

    Ryan-Miao
  • web前端面试中10个关于css高频面试题,你都会吗?

    BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的...

    coder_koala
  • jQuery基础图文系列

    jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。

    菲宇
  • jQuery基础系列

    jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。

    达达前端
  • css(2)

    font-family可以将多个字体名保存起来,如果浏览器不支持第一个字体会依次尝试后面的字体。

    GH

扫码关注云+社区

领取腾讯云代金券