理解BFC

之前听说过听说过清除浮动的各种方法中有一个overflow:hidden，但是一直是认为这是一个“偏门”的方法，并不能作为一个很重要的点来使用。

今天又遇到了这个点，于是百度了一下这个方法的原理，然后就打开了新世界的大门——BFC。

原由

先说一下overflow:hidden。

这句代码的原本含义是裁切掉超出的部分，但是float之后的元素已经不占据流的位置， 没有撑开父元素（前提是父元素的height:auto），那就会裁掉float的这一部分。

这是我的一种理解，没有延伸出去的思考可以就到这里了。

但是，至此我还没了解BFC的概念。

What

BFC（Block Formatting Context）（块级格式化上下文），Web页面中盒模型布局的CSS渲染模式。

说定义的时候就是各种感到难理解，我看了一点相关的知识之后，发现实际上就是这样的：触发了BFC之后就会使得本盒子与外界盒子之间互不影响，最显眼的情况可以看一下这张图。

Why

说了效果，就该再说一下如何为一个容器添加一个触发BFC的样式。

• display，值为一下几种：table-cell、table-caption、flex、inline-block、inline-flex
• overflow，值不为visible时：auto、scroll、hidden
• position，值为absolute、fixed时
• float，除了none时：left、right，影响布局
• <fieldset>，该标签（元素）

How

说道用法，就得先了解BFC的特性，前面的图片描述了其中一条特性：

• 内部的Box会在垂直方向上，依次排列
• Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会叠加
• 每个元素的margin box的左边，与包含块border box的左边相接触（从左向右），这个特性不会受浮动的影响
• BFC的区域不会与float box叠加
• BFC是一个独立容器，内部元素不影响外界元素
• 计算高度时，浮动元素也参与计算

To Do

以前在使用的时候并没有突出注意到BFC的存在，甚至用过，但是不知道这是BFC，哈...

在调整样式的过程中，还是需要去了解原理，然后再使用，避免样式覆盖而产生的莫名其妙，或是去尽量精简代码以实现更优异的编码习惯。