BFC(Block formatting context)块级格式化上下文,是一个独立的渲染区域。
一、如何触发BFC:
1、根元素(html);
2、设置float除none意外的值(left ,right);
3、设置overflow 除visible 以外的值(hidden,auto,sroll);
4、设置display (table-cell,inline-block,flex);
5、设置position(absolute,fixed)
二、BFC的布局规则:
1、内部的BOX会在垂直方向,一个接一个的放置;
2、BOX垂直方向的距离由margin决定。同一个BFC的两个相邻 BOX的margin会重叠;
3、每个元素的margin box (子元素)的左边,与包含块border box(父元素)的左边相接触;
4、BFC是页面上的一个隔离的独立容器,里面的子元素不影响外面;
5、计算BFC的高度时,浮动元素也会参与计算;
6、BFC的区域不与float box(浮动的盒子)重叠。
三、BFC的作用:
1、可以解决上下margin重叠问题,给添加margin值的元素再套一个盒子,并设置overflow:hidden;
2、可以解决高度塌陷问题,子元素浮动脱离了正常的文档流,也脱离了父元素盒子,此时父元素盒子高度为0,给父元素设置overflow:hidden,触发了BFC,闭合浮动;
3、可以实现多栏布局,两个浮动的元素相邻,剩下一个元素设置overflow:hidden ,触发BFC。