117-css-2-布局~BFC
概述
BFC，Block formmat context，块级格式化上下文。它是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
BFC原理（渲染规则|布局规则）
- 内部的元素会在垂直方向上一个接一个的放置
- 属于同一个BFC的两个相邻的元素外边距会发生重叠
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。
- BFC的区域不会与外部float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
形成条件
-
根元素
-
浮动元素：float:left | float:right;【会导致父元素的宽度丢失,也会导致下边的元素上移】
-
定位元素：position:absolute | position:fixed；
-
overflow值不为visible：overflow:hidden;【将会剪切掉溢出的元素】 | overflow:auto、overflow:scroll;
-
display
- 行内块元素（元素的 display 为 inline-block）转为行内块会导致宽度丢失】 - 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素） - 网格元素（display 为 grid 或 inline-grid 元素的直接子元素） - 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值） - 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值） - 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table） - display 值为 flow-root 的元素 -
contain 值为 layout、content 或 paint 的元素
-
多列容器（column-count或column-width不为auto，包括column-count为1）
其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素已经创建了一个BFC了。
使用场景
- 解决边距重叠
- 清除内部浮动，让父元素的高度包含子浮动元素
- 自适应两（三）栏布局
- 清除浮动文字环绕
清除浮动
为父盒子设置 overflow: hidden;
overflow: hidden;使父元素产生了一个BFC，BFC的高度计算包括其内部浮动的元素，从而达到清除浮动的效果
补充
BFC 的意思是形成一个范围，让内部元素不能脱离这个范围，跟是不是按文档流排列没关系。
文档流 指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
脱离文档流的为 左右浮动float、绝对定位absolute或fixed
创建BFC的不是display:flex,而是“flex的直接子元素” 也就是 flex item
IE 作为浏览器中的奇葩，当然不可能按部就班的支持 BFC 标准，于是乎 IE 中有了 Layout 这个东西。Layout 和 BFC 基本是等价的，为了处理 IE 的兼容性，在需要触发 BFC 时，我们除了需要用触发条件中的 CSS 属性来触发 BFC，还需要针对 IE 浏览器使用 zoom: 1 来触发 IE 浏览器的 Layout。
推荐阅读
https://www.cnblogs.com/xiaohuochai/p/5248536.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context