CSS基础-BFC

块格式化上下文/BFC

1. MDN定义：

BFC是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
具有BFC特性的元素可以看作是一个独立的箱子，箱子在外面是一个普通的文档流，箱子内部无论如何变化，都不会影响外面。

2.如何触发BFC（只要满足以下任何一个条件都会触发BFC特性）：

a.body 根元素
b.浮动元素：float 除 none 以外的值
c.绝对定位元素：position (absolute、fixed)
d.overflow 除了 visible 以外的块元素 (hidden、auto、scroll)
e.contain 值为 layout、content或 strict 的元素
f.多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
g.column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
h.display 为 inline-block、table-cells、flex 或 inline-flex元素的直接子元素、grid 或 inline-grid 元素的直接子元素、table-caption、flowroot、（table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）

3. BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

4. BFC特性及其应用：

a.特性：同一个 BFC 下外边距会发生折叠,以下div元素都在根元素body下，触发了BFC，所以第一个div和第二个div的外边距发生了重叠:

外边距发生重叠

应用：利用这一特性，要想两个div的外边距不发生重叠，那么可以将两个div放在不同的BFC容器中(见下图)

去除外边距重叠

b.特性：BFC 可以包含浮动的元素（清除浮动）
应用：由于容器内元素浮动，所以元素脱离了文档流，只剩下一个边框，如果触发了容器的BFC，那么容器就可以包裹着浮动元素,示例中通过设置父元素为overflow:hidden;触发了容器BFC(见下图)

高度坍塌

清除浮动

c.特性：BFC可以阻止元素被浮动元素覆盖
应用：首先展示一个文字环绕效果,此时其实第二个元素有部分被覆盖

BFC阻止元素被浮动元素

通过触发第二个元素的BFC，就可以防止元素被遮挡，同理可得，这个特性可以用于实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度。

防止元素被遮挡

参考：
https://www.jianshu.com/p/2e787c6d8ede

https://zhuanlan.zhihu.com/p/43703098

https://blog.csdn.net/m0_37585915/article/details/78501760
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
https://zhuanlan.zhihu.com/p/25321647?utm_source=wechat_session&utm_medium=social&utm_oi=817135426103050240

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html