简介
在使用CSS的过程中，经常会听到触发BFC,但是何为BFC。BFC(Block formatting context)简单的翻译就是“块级格式化上下文”。BFC是一个独立的渲染区域，它规定Block-level Box如何布局，并且与整个区域外部毫不相干。 BFC有什么作用，BFC什么时候会触发，本文浅析一下BFC产生条件、特性、主要用途，以及它工作的原理。希望喜欢的朋友可以点个赞，或者关注一波本人，谢谢。
触发BFC的条件
元素的显示模式通常可以分为：块级元素、行内元素、行内块元素，但是实际上存在的远远不止这三种显示模式，而这三种是我们经常使用的。
并不是所有的元素都可以触发BFC的效果，W3C规定显示模式为：block、list-item、table的元素会触发BFC。(注意当显示模式为inline-block的时候会触发IFC）
以上的盒子具有BFC条件，但是怎么样才能触发BFC呢，从而创造这个封闭的环境。需要给以上的元素添加如下的属性就可以出触发BFC的效果了
float属性不为none
position为absolute或者是fixed
display为inline-block、table-cell、table-caption、flex、inline-flex
overflow不为visible
BFC具有的特性
- 在BFC中，内部的Box会在垂直方向，一个接一个地放置；
- Box垂直方向的距离由margin决定，属于同一个BFC下相邻两个Box的margin会发生重叠；
- 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。即不会发生margin穿透
- 形成了BFC的区域不会与float box重叠（可阻止因浮动元素引发的文字环绕现象）；
- 计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动）。
原本浮动元素应该是脱离文档流的，但BFC中会计算其高度。
综上特性所述，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
BFC特性的一些应用
-
清除元素内部浮动
只要把父元素设为BFC就可以清除子元素的浮动了，最常见的用法就是在父元素上设置overflow:hidden样式，对于IE6加上zoom:1就可以了
主要用到：就算BFC的高度时，自然也会检测到浮动的盒子高度
清除元素内部浮动.png
-
解决外边距合并的问题
外边距合并的问题，主要用到盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻的盒子的外边距会发生合并
不属于同一个BFC的盒子不会发生外边距合并的的效果
BFC外边距合并.png
- 制作右侧自适应盒子的问题
主要用到BFC区域的盒子不会与浮动的盒子产生交集，而是紧贴浮动边缘
右侧自适应盒子.png
网友评论