CSS布局之--理解BFC

前言

    css一直不是我的强项，这也是我第一篇css相关的文章，虽然我平时css写的比较少，但其中比较重要的基础的东西还是需要理解的，比如BFC、流、浮动等；还是有必要mark下的。

什么是BFC？

    BFC(Block Formatting Context)直译过来就是块格式化上下文，可以看做是一种Web页面中盒模型布局的CSS渲染模式，定位体系属于常规文档流，设置了某些样式后的元素，就可以创建一个新的BFC。

浮动，绝对定位元素，inline-blocks,table-cells,table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。

当一个HTML盒子元素，满足以上任一条件时，就可以将其看作一个BFC。比如: 元素的float属性不为none、position不为static、overflow不为visible等等，只要满足其中一个条件，就形成了一个BFC，当然用得最多的就是设置overflow为hidden来创造一个BFC。

BFC的特性和应用

    了解了BFC的基本概念后，再来看看它的一些特性和常见的应用场景。

1. 盒子边对齐

如上图，一个BFC盒子中的所有元素都是默认左对齐的(左至右)，无论其大小宽高，是否浮动，都是向左边框对齐。

    利用这个特性可以解决文字包围图片的问题，比如一个img和一个p标签从左到右并排放在一起，可能就会出现p的文字过多跑到img的下面去，形成一个文字包围图片的情况，而我们想要的是图片和文字分开，这时候只要给p标签设置一个overflow：hidden，p标签的文字就会乖乖地在图片右边框那里对齐了。

2. 外边距重叠

    在一个BFC盒子中，会导致元素之间的外边距重叠，参考下面的一个例子。

Box是一个BFC盒子，它内部的Sibing元素设置了样式margin: 10px 0。按道理，两个子元素之间的垂直距离应该是20px，但实际上是10px，这就是发生了margin重叠，它会取margin中的最大的一个值而不会叠加。解决这种情况的方法也简单，只要再创造一个BFC，把第二个元素放到第二个BFC中，BFC之间就不会发生这种外边距重叠了。

3. 包含浮动元素(清除浮动)

一般情况下：假设一个div，里面包含了一个浮动的子元素，那么这个子元素将脱离页面的常规流；并且父元素div不会被撑开，没有height高度。

一般情况，父元素没有高度

BFC的情况下： 给父元素div设置一个overflow：hidden使其成为BFC盒子，这个时候父元素div就有高度了，它的子元素也回到了常规流之中。

BFC还可以用来清除浮动，在示例html上写三个三个float: left的元素，那么自然三个元素为排成一排。接着我们给每个浮动元素加一个div父元素，样式写上一条overflow：hidden，会发现三个元素排成了一列，浮动被清除了~~

BFC的情况，父元素被撑开

4. 多列布局

    我们平时很常见的多列布局，要求自适应等，也可以利用BFC来实现。最经典的用法就是，左边一个div左浮动，然后右边一个div设置为BFC，这样左边元素宽度变化时，右边元素可以自适应的变化，具体效果如下图。

左边元素宽度变化，右边元素自适应

同理，也可以实现三列布局，左元素左浮动，右元素右浮动，中间元素设置为overflow：hidden也可以实现自适应。这种布局可谓是一种万能布局了，可以处理很多情景布局。

结语

  说了这么多，其实BFC也算是css的基础内容了，早在flex流行之前，它就可以做到很多布局上的效果，虽说我平时不写css但是也要对其基础重要内容重视起来，原理也要理解。