BFC块格式化上下文

发表于   |   分类于   |     |  

[TOC]

BFC：block formatting context
BFC的理解则是：元素所处的环境以及初始化就叫格式化上下文。格式化就是初始化，上下文是环境。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
1.当两个元素属于不同的 BFC 时，外边距不会合并
2.同一个BFC内父子、兄弟元素的垂直外边距会发生合并
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
4.BFC的区域不会与float box重叠，就是说BFC不会占据float的空间

BFC作用：
1.包含浮动元素，BFC容器可以包含浮动元素，解决高度塌陷，将父元素设置为:overflow:hidden
2.不被浮动元素覆盖，设置BFC的元素不会与占据浮动元素空间
3.阻止外边距合并，两个BFC外边距不会合并
4.清除浮动;

开启元素BFC
1.设置元素浮动flaot
-使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
-而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位position:absolute或fixed
3.设置元素display 为以下其中之一的值 inline-blocks，table-cells(表格单元格)，table-captions(表格标题)、flow-root

  • inline-blocks可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
    4.将元素的overflow设置为一个非visible的值
    -推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
    注意：在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
    在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，
    该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
    开启方式很多，我们直接使用一种副作用最小的：
    直接将元素的zoom设置为1即可
    zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
    zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
    zoom这个样式，只在IE中支持，其他浏览器都不支持

那么BFC又有以下特性：

  • 内部块级盒子垂直方向排列
  • BFC就是一个隔离的容器，内部子元素不会影响到外部元素
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

注：
IFC是行内格式化上下文，是计算行高的一些东西

热评文章