网站专题BANNER

带你揭开BFC神秘的面纱

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

在前端的布局手段中,一直有这么一个知识点,很多前端开发者都知道有它的存在,但是很多人也仅仅是知道它的存在而已,对它的作用也只是将将说得出来,可是却没办法说得非常的清晰。这个知识点,就是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区域,只包含其所有子元素,不包含子元素的子元素.


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




相关内容
浅谈弹性布局在网站建设过程中的奇妙之处

熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果,今天洛壹网络简单为大家讲解一下CSS弹性布局的奇妙之处。

网站建设过程中,我们要了解域名的重要性和能为我们带来什么

在日常的网络建设过程中,还是有相当一部分的客户,不明白域名的重要性以及域名能为企业带来什么样的便利,那么今天洛壹网络就来解释一下,什么是域名?

新手前端指南:一小时搞懂 CSS 属性应用

在 CSS 中,字体属性和文本属性是分开的,这是很容易搞混的东西。字体属性用的是 font 属性,而在 font 下还包含若干常用的属性

前端中的布局方式有哪些?

在web前端开发中,存在有很多的布局模式,这些布局模式各有各的优势,今天咱们就在说说,前端中的布局方式有哪些

浮动布局时,中间出现一块空白

浮动布局时,中间出现一块空白

MYSQL数据库密码如何修改

1.mysql数据库密码如何修改: 1)关闭mysqld程序 a.net stop mysql57 b.任务管理器中结束进程

PHP设置登陆失效时间

PHP设置登陆失效时间,第一种方法即设置php.ini配置文件,设置session.gc_maxlifetime和session.cookie_lifetime节点属性值,当然也可以使用ini_set函数改变当前上下文环境的属性值:

SSL证书:_chain.crt _public.crt .pem .key crt合并pem

在APACHE+PHP环境里,只需要.pem 和 .key文件。所以需要把xxxxxxx_public.crt 和 xxxxxxx_chain.crt合并成一个.pem 文件。

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

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