欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS之BFC(Block Formatting Context)

程序员文章站 2022-05-02 16:21:46
...
以前我也不知道BFC是什么,今天看了才知道原来以前经常接触,只是不知道专业名称罢了。就像闭包、继承一样,以前经常用到,只是不知道而已,今天我就来说一下,css定位之BFC。

BFC与清除浮动是有关系的,那我们就来说说,如何清除浮动,清除浮动主要有两种方法:

①利用 clear属性,清除浮动

②使父容器形成BFC

在讲BCF之前,我要先说一下,我们通常控制元素布局的定位方案主要有3种:普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning)

***普通流(Normal Flow)

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

***浮动 (Floats)

在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移。

***绝对定位 (Absolute Positioning)

在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响(而浮动素会影响兄弟元素),而元素具体的位置由绝对定位的坐标决定。

BFC 正是属于普通流的,因此它对兄弟元素也不会造成什么影响。

&&--BFC的定义--&&

在进行盒子元素布局的时候, BFC 提供了一个环境, 在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。也就是说,如果一个元素符合了成为 BFC 的条件,该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC), 是一个隔离了的独立容器。

&&--BFC到底是什么--&&

当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。

&&--怎样才能形成BFC--&&

①float的值不为none。

②overflow的值不为visible。

③display的值为table-cell, table-caption, inline-block中的任何一个。

④position的值不为relative和static。

⑤css3中flex boxes

&&--BFC的作用--&&

①包含浮动元素(清除浮动)

BFC 会 根据子元素的情况自 适应 高度 ,这个 特性 是 对父元素 使 用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的

②不被浮动元素覆盖
浮动元素会无视兄弟元素的存在, 覆盖在兄弟元素的上面, 为该兄弟元素创建BFC 后可以阻止这种情况的出现

&&--BFC主要有三个特性--&&

①BFC 会阻止外边距折叠
两个相连的 p 在垂直上的外边距会发生叠加,在实际开发中,或许我们有时会不需要这种折叠,这时可以利用 BFC 的其中一个特性——阻止外边距叠加。阻止父子元素的 margin 折叠,仅当两个块级元素毗邻并且在同一个块级格式化上下文时,它们垂直方向之间的外边距才会叠加。也就是说,即便两个块级元素相邻,但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。同时BFC 的元素,不和它的子元素发生外边距折叠。

②BFC 可以包含浮动的元素
这也正是上面使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理,使用 overflow: hidden 或 overflow: auto 触发浮动元素父元素的 BFC 特性,从而可以包含浮动元素,闭合浮动。

W3C 的原文是“’Auto’ heights for block formatting context roots”,也就是 BFC 会根据子元素的情况自动适应高度,即使其子元素中包括浮动元素。

但是 IE6-7 并不支持 W3C 的 BFC ,而是使用自产的 hasLayout 。从表现上来说,它跟 BFC 很相似,只是 hasLayout 自身存在很多问题,导致了 IE6-7 中一系列的 bug 。触发 hasLayout 的条件与触发 BFC 有些相似,具体情况 Kayo 会另写文章介绍。这里 Kayo 推荐为元素设置 IE 特有的 CSS 属性 zoom: 1 触发 hasLayout ,zoom 用于设置或检索元素的缩放比例,值为“1”即使用元素的实际尺寸,使用 zoom: 1 既可以触发 hasLayout 又不会对元素造成其他影响,相对来说会更为方便。

③BFC 可以阻止元素被浮动元素覆盖
如上面所说,浮动元素的块状兄弟元素会无视浮动元素的位置,尽量占满一整行,这样就会被浮动元素覆盖,为该兄弟元素触发 BFC 后可以阻止这种情况的发生。

更多CSS之BFC(Block Formatting Context) 相关文章请关注PHP中文网!

相关标签: css 定位 BFC