https://www.cnblogs.com/heimanba/p/3774086.html
https://wybing.blog.csdn.net/article/details/112447876
BFC 定义
BFC
(Block formatting context
)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box
参与, 它规定了内部的Block-level Box
如何布局,并且与这个区域外部毫不相干。
简单来说,BFC就是一个独立不干扰外界也不受外界干扰的盒子。
BFC
的一些用处(如清浮动,防止margin重叠等
生成BFC
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow:hidden; 不为visible
常用 浮动盒子的父容器,添加 overflow:hidden; 解决父容器高度塌陷
总结
其实以上的几个例子都体现了BFC
布局规则第五条:
BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC
内部的元素和外部的元素绝对不会互相影响,因此, 当BFC
外部存在浮动时,它不应该影响BFC
内部Box的布局,BFC
会通过变窄,而不与浮动有重叠。同样的,当BFC
内部有浮动时,为了不影响外部元素的布局,BFC
计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。