CSS之BFC(BlockFormattingContext)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS之BFC(BlockFormattingContext)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3666字，纯文字阅读大概需要6分钟。

内容图文

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(BlockFormattingContext)全部内容，希望文章能够帮你解决CSS之BFC(BlockFormattingContext)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端