前端CSS必知：BFC及其触发条件

将本人好久之前的 云笔记 搬到博客上来，统一维护。

1. bfc的理解（块级格式化上下文）

可以看作是隔离了的独立容器，内部元素的布局，不会影响外部元素。
可通过css属性触发。

浮动元素产生了浮动流，块级元素看不到(看不到的意思是不会被影响)；
文本类属性的元素（inline)，文本元素和产生了bfc的元素都能看到浮动元素。

2. 触发bfc的方式

定位、浮动、overflow: hidden、display 的多种。
（1）position:absolute或fixed；
（2）float:left/right;
（3）overflow:hidden; 不为visible， 常用方式;
（4）display:inline-block; flow-root, table-cell, table-caption, flex, inline-flex等。

3. bfc解决的问题：外边距合并，检测浮动高度，制作右侧自适应盒子

垂直方向的距离由 margin 决定， 属于同一个 BFC 的两个相邻的外边距会重叠，如果想不重叠，就要设置独立的BFC。