BFC 与 IFC

一 、介绍

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.

一个块格式化的内容是网页的视觉CSS渲染的一部分。定义了一个块盒的布局发生的区域，其中浮动与其他元素交互。

简要来说就是他会创建一个新的布局区域，该元素里面的子元素会按照该区域来进行布局,就算该元素里面的布局乱成一锅粥，也不会影响外部的元素。

二、创建一个新的BFC

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

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

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

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

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

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

6、浮动盒区域不叠加到BFC上；

四、BFC一些常用场景

1、清除float带来的高度坍塌,通常使用 overflow: hidden

2、清除margin重叠, 建立一个新的BFC包裹重叠的元素

3、清除float带来的文本环绕

image.png

理解下为什么BFC会改变文本环绕，

1、首先是浮动，浮动元素会离开正常的文档流，建立起一个新的BFC，
而它离开后，后面的block元素会无视他的存在，但是inline元素就会挨着他布局，这才是float这个属性的真正用意，并非一开始就是用来布局的。

2、 为什么block元素里面的内容还会挨着float元素呢？原因是。
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
中文的意思一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。
结合第一点就是，虽然block元素里面的文本和float元素不是在同一层级里面，但是仍然处于同一个文档流里面，他们还是会互相影响的，这时候我们BFC就用上场了。只需要为该block元素建立一个BFC与外面的元素互不相干就可以了。

4、利用Float 和 BFC实现只适应布局
参考张鑫旭老师
.left { float: left; } .right { display: table-cell; width: 9999px; *display: inline-block; *width: auto; }