BFC

2018-01-26 本文已影响3人无人问津的呢喃

BFC是什么

BFC：Block Formatting Context。
中文翻译就是块级格式化上下文，它是Web页面的可视化CSS渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。查看W3C文档
BFC是一块“与世隔绝”的区域。外部元素影响不了内部元素，内部元素也影响不了外部元素。所以BFC元素不会发生margin重叠，因为margin重叠实惠影响到外部元素的；BFC元素也可以用来清除浮动的影响，因为如果不清除的话，浮动元素会导致父元素高度坍塌以及影响后面元素的布局和定位，显然这不是BFC中不影响外部元素的设定

如何触发BFC

根元素；
float属性不为none；
position不为static，relative
display为inline-block, flex, 或者inline-flex；
overflow为auto，scroll和hidden；

BFC的特性

1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
3、BFC的区域不会与float box重叠。
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
5、计算BFC的高度时，浮动元素也参与计算。

BFC的作用

解决外边距合并问题

这是一个包含p元素的div

黄色区域为div，红色区域为p

我们先设置外面div的margin-top值为20px。效果如下图：

div：margin-top：20px

我们再设置子元素p的margin-top为10px/20px。效果如下图：

div：margin-top：20px；p：margin-top：10px/20px

很明显，盒子并没有发生任何变化。这回我们理想的图有一丝差别。

我们理想的效果图

我们再设置p的margin-top值为30px。效果如下：

div：margin-top：20px；p：margin-top：30px

可以看出来，到body边框的距离又变大了，变成了30px。
看起来就感觉div的外边距和字元素p的外边距重合了一样。
这就是外边距合并，那什么是外边距合并呢？

流内块级元素的top与bottom外边距有时会合并（塌陷）为单个
外边距（合并后最大的外边距），这样的现象称之为外边距塌陷（margin collapsing）
外边距合并只发生在相邻的元素之间（父元素和它的第一个子元素，父元素和他的最后一个子元素，相邻兄弟元素之间）以及空元素的自身合并
合并只涉及上下（margin-top/bottom）不涉及左右（margin-left/right）

我们可以利用BFC元素的封闭特性来解决外边距合并问题。比如给div设置display:inline-block属性，触发BFC。