什么是BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC特性
bfc特性:
1.内部的box在垂直方向上会一个接一个的放置
2.由垂直方向上由margin决定,但是同时属于同一个bfc区域下的两个相邻的box盒子之间的margin会重叠,以大的margin为准
3.每个元素的左边外边距会和包含块的左边界想接触(bfc中元素不会超出)但是absolute定位是特例 绝对定位
4.bfc区域不会和float元素重叠
5.当计算高度时,浮动子元素也需要进行计算
6.bfc就是一个独立隔离的容器,里面的子元素不会影响另外一个bfc的内容
水平不会重叠
如何创建BFC
- 1、float的值不是none。
- 2、position的值不是static或者relative。
- 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- 4、overflow的值不是visible
BFC作用
1.利用BFC避免margin重叠
2.自适应两栏布局
3.清楚浮动
body就是一个bfc区域(页面独立渲染区域)bfc区域影响,上下排列,互不影响。 bfc需要特定的css样式进行触发 body默认就是bfc