学习日记——BFC

 目录

BFC的概念

BFC的触发条件

BFC的特性及应用

BFC的概念

        BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC的触发条件

1. 根元素 html 默认就是一个 BFC

2. float的值不为none 单纯的 div 不是 BFC ，如果添加了浮动就是 BFC

3. overflow的值不为visible  单纯的 div 不是 BFC ，如果添加了 overflow ： hidden 等就是 BFC

4. display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex

5. position的值为absolute或fixed

BFC的特性及应用

1. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠 （应用：防止marin重叠）

2. BFC的区域不会与float box 发生 重叠 （应用： 自适应两栏布局 ）

3. 计算BFC的高度时，浮动元素也参与计算 （应用：清除内部浮动）

4、BFC内部的Box会在垂直方向，一个接一个的放置。

5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素