首先,我们需要说明一下,什么是BFC呢?我们去MDN文档先去看看,官方文档是怎么定义的呢?BFC是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。相信大家,对这个还是有一些云里雾里的。那我们继续在讲解一下,用代码来实现,你就明白。
块格式化上下文对浮动定位都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。来,一起看看下面的代码用例。