关于CSS中BFC的那些事

首先什么是BFC？根据W3C的标准，在页面中元素都有一个隐含的属性叫Block Formatting Context（块级格式化上下文），简称BFC，可以理解为就是一个比较独立的隔离的渲染区域，该区域的子元素不会影响其父元素及以外区域的布局。该属性可以设置打开或关闭，默认是关闭状态。

一、什么情况下需要使用开启BFC

1、在网页布局的过程中我们经常会使用到浮动float这个属性，它优点很多，但也有一个很大的缺点，那就是在浮动的过程中出现高度塌陷的问题。假如存在父子元素，给子元素设置里浮动以后，子元素脱离文档流，无法撑起父元素的高度，导致父元素的高度丢失，从而布局混乱了。这种情况下就可以开启BFC。

未设置float属性前布局：

设置float属性后，高度塌陷，布局混乱：

二、如何开启BFC

解决高度塌陷有很多种方式，其中一种就是开启BFC属性。那究竟如何开启呢，有什么方式呢？

• 设置元素浮动（虽然该方式撑开了父元素，但会使得父元素宽度丢失，其他元素布局依旧混乱，不推荐）
• 设置元素绝对定位（宽度依然丢失，布局依然混乱）
• 设置元素为inline-block（高度不塌陷，但宽度依然丢失）
• 将元素的overflow设置为非visible的值，是副作用最小的一种方式，推荐使用（但在IE6以下的浏览器不兼容BFC方式，此时可以开启hasLayout隐藏属性，其中一种副作用最小的方式是设置zoom为1即可）

三、开启BFC后元素的特性

1. 父元素的垂直外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动的子元素

四、总结

BFC的开启并不只是只有以上方式，而BFC也应该不是只解决高度塌陷问题，日后遇到再总结吧。而高度塌陷也不是只有一种overflow的方式，还可以设置after伪类，可以在父元素的最后添加一个空白的div，再添加清除浮动操作，这些是基本没有副作用的方式。