如何创建块级格式化上下文？块级格式化上下文的作用

css中块级格式化上下文是什么？块级格式化上下文（block formatting context）是网页css视觉渲染的一部分，并用于决定块盒子的布局。在定位体系（positioning scheme）中它属于常规流（normal flow），那么如何创建块级格式化上下文？创建块级格式化需要满足哪些条件？本文将给你一一说明。

FC(Formatting Context)翻译过来就是格式化上下文/格式化范围，指的是页面布局中的一块区域，它拥有自己的渲染规则，决定自己的子元素如何布局，并和其他元素的关系和作用。

根据css显示分类，xhtml元素被分为三种类型：块状元素，内联元素，可变元素。给页面元素加样式的时候我们得知道这个元素是什么类型，然后可以自己对元素类型转化。就像我们可以通过display来让某个内联元素变成块状元素（display：block）。有几个特别的元素img，input默认是inline-block；

什么是块状格式化上下文（BFC）？相当于一个特殊的区域。

如果一个元素符合了成为BFC的条件，该元素成为一个隔离了的独立容器，元素内部元素会垂直的沿着其父元素的边框排列，和外部元素互不影响 。

触发 BFC 的条件如下：

1、浮动元素，float 除 none 以外的值

2、绝对定位元素，position（absolute，fixed）

3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions。//就是不是块级盒子的块容器

4、overflow 除了 visible 以外的值（hidden，auto，scroll）

满足了上面这四个条件之一，就能够创建块级格式化上下文，它里面的内容所处的环境就是块级格式化上下文的环境。

在 CSS3 中，BFC 叫做 Flow Root，并增加了一些触发条件：

1、display 的 table-caption 值

2、position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在 CSS3 中更加明确了这一点。

元素设置 IE 特有的 CSS 属性 zoom: 1 触发 hasLayout ，zoom 用于设置或检索元素的缩放比例，值为“1”即使用元素的实际尺寸，使用 zoom: 1 既可以触发 hasLayout 又不会对元素造成其他影响，相对来说会更为方便。这是ie下的情况

wordpress主题：格子商铺主题

这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果

2

查看详情

块级格式化上下文（BFC）的作用：

(1) BFC 会阻止外边距折叠

我理解折叠的意思就是外边距会重叠，并不会分的很清，就像你的就是我的，我的也是你的。

外边距折叠的规则：仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会叠加。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。因此，阻止外边距折叠只需产生新的 BFC 。

但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生折叠了。

(2) BFC 可以包含浮动的元素

 这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界

(3) BFC 可以阻止元素被浮动元素覆盖

 这是根据每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。这个原理实现的。

相关文章推荐：

CSS > 译文：理解CSS中的块级格式化上下文_html/css_WEB-ITnose

CSS理解块级格式上下文BFC

块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解_html/css_WEB-ITnose

以上就是如何创建块级格式化上下文？块级格式化上下文的作用的详细内容，更多请关注php中文网其它相关文章！