BFC直译为块级格式化上下文,它是一个独立的渲染区域,只有block-level box参与,它规定了内部逇Block-level Box如何布局,并且与这个区域毫不相关。
这样对它的基本概念是不是清楚了!接下来我们认识一下它的布局规则!
他的产生是只有block块级的box的话会创建这个区域
同处同一个bfc的内容会产生 1.margin塌陷 2.内部额box会在垂直方向一个一个放置
通过bfc概念,我们可以解决 1.margin塌陷问题.让box 的overflow:hidden,产生两个bfc区域 2.避免文字环绕 让其中一个box的overflow:hidden 产生一个bfc区域 3.避免父子盒子,父盒子收到子盒子的margin-top影响,往下移动..需要将父盒子设置overfloat:hidden 4.父盒子包含float元素的话,父盒子没有自动撑高,需要将父盒子设置overfloat:hidden
触发bfc条件 float浮动 定位position absoulte 或者fixed 行内块显示 inline-block overflow hidden flex table-cell