BFC 随笔记录

写在前边

一直觉得 BFC 虚无缥缈的很难理解，最近重点了解一下，有所收获，遂记录下来。

BFC是什么

定义

BFC（block formatting context）：块级格式化上下文。

约束对象

BFC 内的所有块级元素

详细内容：

1. 一个块级元素占据整行空间
2. 竖直方向从上到下排列
3. 元素间的垂直间距由 margin 决定，相邻块级元素的垂直 margin 会出现折叠。
4. 计算 BFC 的高度时，浮动元素也参与计算
5. BFC 里的块级元素边缘不会超出 BFC 边界，除非这个元素自己也变成了一个新的 BFC。

BFC怎么用

创建BFC的方式

1. html根元素默认创建 BFC
2. float: left / right
3. position: relative / absolute / fixed
4. overflow: hidden / auto / scroll
5. display: inline-block / flex / inline-flex

利用BFC的场景

清除浮动

若父元素中有浮动的子元素导致高度塌陷，可以给子元素添加 overflow: hidden ，这样就可以实现外层元素包裹子元素，因为 overflow: hidden 创建了BFC，不允许孩子超出自己的边界。

margin外边距折叠

父子块级元素如果没设置边框和padding则外边距会产生折叠。这时为父元素设置BFC后会阻止父子元素外边距折叠。

子元素超出父元素

这种场景非常多见，使用 position: absolute 等方式进行偏移布局实现UI设计。