探究BFC和float

BFC和float本身其实没什么关系，但是BFC的一个用途是用来清除浮动，所以放在一起了。

首先BFC（块级格式化上下文），就算是中文翻译过来也不是很好理解，可以理解为一个独立的渲染空间。这个空间内部的子元素布局不受外部元素的干扰，例如浮动元素，就是一个BFC。

说完BFC说float。其实float我现在用的比较少，基本都可以用其他方式实现。刚刚学习css的时候，看到这个元素觉得很神奇，可以让元素脱离文档，实现一些布局需求。但是也是由于他脱离文档的特点，会造成一些麻烦。比如文字环绕，与非浮动元素重叠。这时候我们通常会给非浮动元素设置clear:both来清除浮动，但是clear真的清除了浮动吗？clear的定义是使块级元素的边不与浮动元素接触，其实它本质上认为浮动元素高度实际存在的。看下图：

从图中可以看出A是浮动元素，B元素与A元素发生了重叠，且形成了文字环绕。当我们使用clear：both之后，就会变成这样。

可以看出来虽然B元素不与A发生重叠，但B元素认为A仍然具有高度。如果我们想要实现真正意义上清除浮动即A脱离文档不影响B的布局，那就可以使用BFC。BFC的一个特点就是可以使元素不受外界元素影响。因此我们给B元素设置overflow：hidden触发B元素成为BFC。此时变成这样：