一个html文档的正常文档流应该是所有块级元素从上往下依次排列,所有行内元素沿着行间排列。
而bfc则是打破了这种排列,float和position就是bfc的两种用例,当float的属性值不为none的时候,就会触发bfc,它可以让块元素脱离文档流原本的排列顺序也沿着行间排列,这就是浮动。
position的属性值不为默认的static的时候也会触发元素的bfc,使得元素脱离原文档流,拥有定位的功能。
这里说下所谓脱离文档流就好比是说该元素突然在正常的文档流里消失了。因此会出现如果母元素不清楚浮动,母元素就包不住浮动子元素这样的情况。