您的位置：首页 > Web前端 > CSS

块格式化上下文（BlockFormattingContext）

2017-08-19 15:02 375 查看
原文地址：http://www.cnblogs.com/elcarim5efil/p/4745796.html

原文地址中有些图片不能正确显示了，在转载的地址还能够正确浏览图片。

其他转载：http://web.jobbole.com/83274/

挑其中的重点来说一说。

BFC创建方法

根元素（
<html>
）或其它包含它的元素；

浮动 (元素的
float
不为
none
)；

绝对定位元素 (元素的
position
为
absolute
或
fixed
)；

行内块
inline-blocks
(元素的 
display: inline-block
)；

表格单元格(元素的
display: table-cell
，HTML表格单元格默认属性)；

overflow
的值不为
visible
的元素；

弹性盒 
flex boxes
(元素的
display: flex
或
inline-flex
)；

注意：一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

BFC效果、特性

建立一个隔离的空间，断绝空间内外元素间相互的作用

内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；

处于同一个BFC中的元素相互影响，可能会发生margin collapse；

每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；

浮动盒区域不叠加到BFC上；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  BFC IFC 盒子模型 视觉格式化模型 css
相关文章推荐
新的分享
章节导航