前端开发 css 的 BFC

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

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow:hidden;       不为visible  

常用 浮动盒子的父容器,添加  overflow:hidden; 解决父容器高度塌陷  

总结

其实以上的几个例子都体现了BFC布局规则第五条：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。