CSS中BFC的应用

前言

说起BFC，一些不熟悉的童鞋往往会有两种情况：1. 用了BFC但是不知道有这回事，2.请教过大佬听过BFC大名然后CV了一段overflow: hidden解决了问题然后不刨根问底，笔者曾经也是其中的一员。思维不清晰肿么办？问谷歌娘呗～看了好多文章，知道自己没有过目不忘的本事，还是觉得要自己动手写写，一来加深印象，二来方便日后追溯，故撰此文。

什么是BFC？

w3c是这么解释的：

​ 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文(block formatting context)。

请注意，BFC并不是一个css属性，也不是一段代码，而是css中基于box的一个布局对象和单位，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。明确地，它是一个独立的盒子，并且这个独立的盒子内部布局不受外界影响，当然，BFC也不会影响到外面的元素。

成为BFC的条件

其实在w3c规范中已经简单罗列了称为BFC的基本条件，但我们还是详细说明下，保持记忆脉络清晰。

一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个：

1. float的值不为