网站专题BANNER

带你揭开BFC神秘的面纱

发表日期:2021-09-11 文章编辑:洛壹网络 文章来源:深圳网站建设

在前端的布局手段中,一直有这么一个知识点,很多前端开发者都知道有它的存在,但是很多人也仅仅是知道它的存在而已,对它的作用也只是将将说得出来,可是却没办法说得非常的清晰。这个知识点,就是BFC。想要了解BFC的规则,前提必须是熟悉前端网页的多种布局手段,例如盒的显示模式display,三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。你只有熟练掌握了这些布局手段之后,才能很好的理解BFC。今天洛壹网络来为大家解析一下BFC,希望对各位新老朋友有所帮助。


一、定义

BFC - Block Formatting Context 块级格式化上下文 BFC的定义,在官方文档到中,是这么介绍BFC的。


“A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.”


强行翻译一下吧,简单来说,这句话的意思就是:“一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素”


很显然,哪怕强行翻译了,大部分人依旧是看不懂这句话的。看都看不懂,那自然就没什么能把它说明白。talk is cheap, show me the code.看不懂意思,我用代码来给你演示。


<div class="box1"id="HM_bfc1">


<divclass="box2"></div>

<divclass="box3"></div>

<divclass="box4"></div>

<divclass="box5"id="HM_bfc2">


<divclass="box6"></div>

<divclass="box7"></div>

<divclass="box8"></div>


</div>

</div>


用这段代码来解释上面那段BFC定义的话,就应该是这个意思:#HM_bfc1是一块BFC区域,这块区域包含了box2、box3、box4、box5,也就是所有#HM_bfc1的子元素。同时#HM_bfc2也创造了一块BFC区域,包含了box6,box7,box8。注意,第一个box1的BFC,只包括box1的子元素box2345,不包括box678。#HM_bfc2这个BFC同样也仅仅是包括自己的子元素box678。


划重点

每一个BFC区域只包括其子元素,不包括其子元素的子元素。(这1点比较容易理解)

每一个BFC区域都是独立隔绝的,互不影响!(这点不太好理解,但是后续会使用代码验证)

看完上面的描述,很多朋友依旧不懂,把第2节用心的再读一遍,相信你会有新的收获。然后往下继续阅读,你会豁然开朗。


二、触发BFC

并不是任意一个元素都可以被当做BFC,只有当这个元素满足以下任意一个条件的时候,这个元素才会被当做一个BFC。


触发BFC的条件

• body根元素

• 设置浮动,不包括none

• 设置定位,absoulte或者fixed

• 行内块显示模式,inline-block

• 设置overflow,即hidden,auto,scroll

• 表格单元格,table-cell

• 弹性布局,flex

上代码说明


<body>

<div id="box1"></div>

<div id="box2"></div>

<div id="box3">

<p>大佬说,关注涨5毛钱</p>

<p>大佬说,收藏涨8毛钱</p>

</div>

<div id="box4"></div>

</body>


首先, body元素是1个BFC,因为它满足我们的第1个条件(body根元素),这个BFC区域包含子元素box1234,但是不包括两个p标签,需要注意的是,box3不是一个BFC区域,因为他不满足上面任意1个条件。如果我们希望box3也是1个BFC区域,只要让box3满足上面任意一个条件即可。


这个时候,box3元素被设置为了overflow为hidden,满足上面第5个条件,所以此时,box3就成为了一个BFC区域,这个BFC区域包含其所有子元素 – 两个p标签。


划重点

并不是所有的元素都是BFC, 只有满足了上面的任意1个条件之后,这个元素才成为1个BFC。

一个BFC区域,只包含其所有子元素,不包含子元素的子元素.


深圳网站建设_深圳网站设计




相关内容
我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器