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。此时变成这样: