前言关于BFC，可能很多人都耳熟能详，但也有一些人可能是第一次听说。熟悉的朋友不妨复习一下，查漏补缺。对于不是很熟悉的人，仔细阅读后，应该能够对BFC的概念、作用和用法有更深入的了解。希望对大家有所收获。什么是BFC？BFC的全称是blockformattingcontext，中文意思是“块级格式化上下文”。是一个独立的渲染区域，规定了内部如何布局，内外元素互不影响。与之对应的还有IFC，即inlineformattingcontext，中文是“行内格式化上下文”。不是本文的重点，感兴趣的童鞋可以自行查看。如何形成BFC？根元素float的值不为none，overflow的值为auto，scroll或hiddendisplay的值为table-cell、table-caption、inline-block中的任意一个，position的值为非relative或者static其中，最常见的就是overflow:hidden,float:left/right,position:absolute。换句话说，每次看到这些属性，就意味着元素和BFC已经创建。BFC的功能是什么？使用BFC防止垂直边距重叠使用BFC清除浮动使用BFC实现自适应布局使用BFC防止浮动元素覆盖BFC有什么特点？特点一：BFC中的元素是垂直放置的，从上往下依次排列。我们通常说的盒子是由margin、border、padding、content组成的。其实每种类型的四个边都定义了一个盒子，如图所示，分别是contentbox，paddingbox，borderbox，marginbox。这四种类型的框总是存在的，即使它们的值为0。margin-box决定了包含块中块框与相邻块框之间的垂直距离。从顶部开始一个接一个地放置可以理解为通常的风格，即块级一个接一个地放置div。特点二：BFC中相邻的两个元素会塌陷元素垂直方向的距离由margin决定。属于同一BFC的两个相邻元素的边距将重叠。示例代码如下：
ABC
abc
p{color:#fff;背景：#f66；宽度：200px；行高：100px；文本对齐：居中；margin:100px;}效果图：在上面的例子中，两个P之间的距离应该是100px，但实际上是50px。主要原因是保证金已经崩盘。如果遇到这种情况，只需要用其中一个P外面的div包裹两个P，然后触发外面div的BFC，防止两个P的边距重叠。也就是说，使用BFC可以防止垂直边距重叠。特征3：在BFC中，marginbox和borderbox的左边是parent和child接触的。每个元素的边距框的左侧接触包含块的边框框的左侧（对于从左到右的格式，否则）。即使存在浮动也是如此。示例代码如下：