什么是BFC,BFC有什么用

BFC

它是一个独立的渲染区域,只有Block-level box参与,它规定了内部Block-level Box如何布局,并且与这个区域外部毫不相干

Block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box

BFC 的规则

• a、BFC里面的box都会以垂直方向排列
• b、同一个BFC里面中相邻的两个盒子的外边距会重叠
• c、 每个元素的左margin box的左边与包含块的border box的左边相接触(对于从左往右的格式,否则相反),即使存在浮动也一样
• d、BFC的区域不会和float Box重叠
• e、BFC就是一个独立的容器,容器里面的元素不会影响到外面的元素,反之也如此

BFC的生成

• a、根元素
• b、float属性不为none;
• c、display属性为:line-block,table-cell,line-flex,flex
• d、position属性不为:static,relative;
• e、overflow属性不为:visible