今天我们来聊聊BFC吧

2018-03-27 本文已影响38人 IrisLong

一、BFC是什么？
在解释 BFC 是什么之前，我们先来了解下Box、Formatting Context是什么？
1、Box: CSS布局的基本单位
Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

几个常见的盒子：
block-level box:display属性为 block/list-item/table的元素，会生成 block-level box。参与 block fomatting context。
inline-level box:display属性为 inline/inline-block/inline-table的元素，会生成 inline-level box。参与 inline formatting context。

2、Formatting context
　　Formatting context 是页面中的一块渲染区域，有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

3、BFC
BFC（全称Block Formatting Context）块级格式化上下文，它是指一个独立的块级渲染区域，只有block-level box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

此处引用一简友举出的例子对BFC做一个形象说明
可以把页面想象成一个大的集装箱，这个集装箱里装的货物就是html元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打包好再装入集装箱，这样处理后无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以想象成Block Formatting Context。

二、BFC的生成
生成BFC的元素决定了BFC的位置与大小！

当一个HTML元素满足下面条件的任何一点，都可以产生BFC
根元素
float的值不为none
overflow的值不为visible
position的值为asolute,fixed
display的值为inline-block,table-cell,table-caption,flex,inline-flex(后两个为CSS3属性)
常用的用于触发BFC的CSS样式
float:left/right
overflow:hidden/scroll
position:absolute
display:inline-block/flex

三、BFC的布局规则？

浏览器对于BFC这块区域的约束规则如下：
1、内部元素会在垂直方向一个接一个的排列，可以理解为BFC中的一个常规流
2、垂直方向上的距离由margin决定。即属于同一个BFC的两个相邻Box的margin会发生重叠。
3、每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4、BFC的区域不会与float的元素区域重叠
5、计算BFC的高度时，浮动子元素也参与计算
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

四、BFC的应用
1、自适应两栏布局
正常情况下布局如下：虽然存在浮动元素aside，但是main的左边依然与包含块的左边接触，原因可见BFC布局规则第三条，即：每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。

但是可以将main生成BFC，来实现自适应两栏布局，原因可参考BFC布局规则第四条，即：BFC的区域不会与float的元素区域重叠。注意main会根据包含块的宽度、aside的宽度自动调整宽窄。

2、清除内部浮动
正常情况下布局如下：父容器高度为自适应时，子元素浮动会导致父容器高度坍塌。

原因：
为元素添加浮动后，会导致元素脱离文档流，导致该浮动元素内容在父容器中被抽离出来。由于父容器高度为自适应，即父容器高度依赖于子元素内容将其撑开，那么子元素消失势必会造成父容器高度坍塌。
解决方法：
（1）利用父元素形成BFC，从而开辟出独立空间
根据BFC布局规则第五条，即：计算BFC的高度时，浮动子元素也参与计算。为了清除内部浮动，可以将父元素box生成BFC，那么在计算box的高度时，box内部的浮动元素child也会参与计算。

（2）在父元素中添加伪元素，代码如下：

.box::after{
            content:'';
            display:block;
            clear:both;
        }

（3）在子元素末尾生成一个空元素clearfix

.clearfix{
            clear:both;
        }

3、防止margin重叠
（1）同时满足以下三点会导致margin重叠：
这些margin都处于普通流中，且属于同一个BFC中
这些margin没有被非空内容、padding、border或clear分隔开
这些margin在垂直方向上是毗邻的
（2）重叠边距计算：
当两个margin都为正值或负值时，取两者中绝对值的最大值
当多个margin毗邻且既有正又有负时，取正负margin中各自绝对值最大的相加
（3）解决办法：
法一：给其中一个元素加border或padding
法二：通过overflow:hidden生成BFC
如图所示：

[参考资料]
https://www.jianshu.com/p/35e3b3374c26
http://www.cnblogs.com/dojo-lzz/p/3999013.html#undefined
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

今天我们来聊聊BFC吧

猜你喜欢

热点阅读