bfc

W3C关于BFC的一个解释: Block Formatting Context（块格式化上下文）是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。 在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。 看起来比较蛋疼是吧，另一个通俗点的解释是：在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline

刚拒绝了一个很有诱惑的公司，不是不想去，而是对现在的能力还不确定，希望能够进一步提高自己的技能，所有想写博客了，监督自己的学习进度·········现在还没有开放博客，希望成熟一些后再开放吧！ 进入正题啦啦啦！ 一、什么是BFC(Block Formatting Content)？ IE用的是hasLayout而非IE浏览器用的即是BFC（块格式化上下文） 1、BFC是W3C CSS2.1中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素之间的关系和相互作用。在创建了BFC的元素中，其子元素会一个挨着一个的放置，垂直方向上他们的起点是一个包含块的顶部，两个相邻元素的垂直距离取决于margin值，但是呢，相邻的块级元素的垂直边距会折叠（collpase） （ 我是这么理解的：就是设置margin：10px，但是显示是5px，不知正确否？） 2、在BFC中，每一个元素的左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也会如此（尽管一个元素的内容区域会因为浮动而压缩）（ 不是很理解这个 ）。除非这个元素也创建了新的BFC。 3、在CSS3中对BFC有了新的定义： http://www.w3.org/TR/css3-box/#block-level0 ，CSS3中将BFC 叫做 flow root。 二、怎么才能触发BFC呢

BFC（block块，f格式化，c上下文content ）译为"块级格式化上下文" 它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。 根元素 float的值不为none overflow的值不为visible display的值为inline-block、table-cell、table-caption position的值为absolute或fixed BFC布局规则： 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时，浮动元素也参与计算 三、BFC的作用及原理 　　1. 自适应两栏布局 　 　代码： <style> body { width: 300px; position: relative; } .aside { width: 100px;

1 BFC是什么 Block Formatting Context （块格式化上下文）是W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。创建了BFC的元素会按照如下 的方式对其子元素进行排列： 元素的子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于'margin' 特性。在BFc中相邻的块级元素的 垂直边距会折叠（collapse）。 元素的子元素中，每一个子元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC，如它自身也是一个浮动 2 haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性， 属性值 可以为true或false。当一个元素的

2014年1月26日 首先，hasLayout 和 Block Formatting Contexts 分别是什么？ 1、hasLayout是IE内部的一个特有的隐形属性，属性值为true/false。元素一旦拥有了这个属性，就拥有了布局，也就是说该元素可以对自己及其子元素进行尺寸计算和定位（比起依赖父元素进行布局会花费更大的代价）。由于这个元素是隐形的，不能通过CSS来设置hasLayout:true/false;可以通过js来检测元素是否拥有布局。hasLayout是只读属性，一旦触发，不可逆转。有些元素本身就默认拥有布局，有的元素可以通过一些 CSS 属性设置（如 display 、 width 、 height 等）来激发产生布局。并不是所有元素都拥有布局的原因是为了简洁和提高性能，拥有布局会消耗内存，并不轻量，会降低性能。最常用的是在CSS中设置zoom:1;来激发布局，不会产生任何其他影响的情况下让元素拥有布局。 2、BFC（块级格式化上下文）就是一种属性，该属性会影响着元素的定位和与其兄弟元素之间的相互作用。拥有BFC的元素可以看成是被隔离了的独立的容器，容器里面的元素在布局上不会影响到容器外面的元素，它是属于普通流（在CSS 2.1中有三种定位方案：普通流、浮动、绝对定位）的，因此不会对兄弟元素产生影响。 那么，怎么触发hasLayout 和 BFC ？ 1

margin折叠的产生有几个条件： 这些margin都处于普通流中，并在同一个BFC中； 这些margin没有被非空内容、padding、border 或 clear 分隔开； 这些margin在垂直方向上是毗邻的，包括以下几种情况： 1、一个box的top margin与第一个子box的top margin 2、一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下 3、一个box的bottom margin与紧接着的下一个box的top margin 4、一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box 垂直方向上毗邻的box不会发生折叠的情况： 根元素的外边距不会参与折叠 一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottom margin折叠 折叠边距的计算 当两个margin都是正值的时候，取两者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正

3 月，跳不动了？>>> BFC的理解与应用 首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。 什么是BFC（Block formatting contexts） w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。 BFC的通俗理解： 首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。

BFC的概念 什么是BFC呢？ BFC：块级格式化上下文（Block Formatting Content）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。 简而言之，可以把BFC理解成一个箱子，箱子内部的元素如何摆放都不会影响外部。 产生BFC 根元素(html) float的值不为none position的值为absolute和fixed display的值为table-cell、table-caption、flex、inline-flex overflow的值部位visible 只要满足以上条件之一就能触发BFC BFC的具体应用 1.在同一个BFC下会发生外边距合并 这里先说下外边距合并，外边距合并一般有3种情况 第一种，当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并。 第二种，当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和

BFC(块级格式化上下文) 一、BFC是什么？ 从样式上看，具有BFC的容器和普通的容器没有区别。从功能上看，具有BFC的容器可以看作是隔离了的容器，容器里面的元素不会影响到外面的元素，并且BFC具有普通容器没有的一些特性，例如可以包含浮动元素，上文中的第二类清除浮动的方法（如overflow方法）就是触发了浮动元素的父元素BFC，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。 简单来说，BFC就是一种属性。这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 二、BFC的触发 浮动元素：除了属性值为none的元素。 position:absolute/fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible(hidden/scroll/auto) 根元素 三、BFC的特性 3.1 BFC阻止元素外边距折叠 两个相邻的元素margin会折叠。而当有BFC产生的时候，外边距不会叠加。 3.2 BFC 可以包含浮动的元素 这里就是之前提到的包裹性，这也正是使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理，使用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC

BFC是什么？ BFC(Block Fomatting Context)为块级格式化上下文的的简称。 简单点说，把BFC看成一个渲染区域或者容器，在BFC这个容器内部的的元素无论如何布局都不会影响其外部的元素。 并且BFC还有它自己的一些特性，下面会说到。 BFC模式的形成条件如下（ 满足以下任意一条均可形成BFC ）： 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、table、flex overflow 除了 visible 以外的值 (hidden、auto、scroll) 直接说应用场景： 1、同一个BFC容器内元素外边距重叠。 简单的描述下，绿色框框为外边距没有重叠的情况，因为这些元素不在同一个BFC内。 还有水平外边距重叠、嵌套外边距重叠等情况，思路一样，应用上面几条BFC模式的形成条件，使元素不在同一BFC下即可。 2、清除内部浮动。 BFC计算高度的时候 ，内部的浮动元素也会参与计算，来两张图对比下： 简单的说，蓝色边框div，增加了overflow: hidden;样式，使它变成了BFC。 3、自适应多栏布局 来源： https://www.cnblogs.com/zhinian-/p/12522762.html