5.3-BFC原理（学习笔记）

10 分钟理解 BFC 原理
BFC是什么？

什么是BFC？看这一篇就够了

介绍

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素

BFC区域是独立容器，互不影响
只包含其元素，不包含子元素的子元素。
满足条件才成为一块BFC区域。

形成条件

浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
块级元素：overflow 除了 visible 以外的值 (hidden、auto、scroll)

display 为 inline-block（行内块）、table-cells（表格元素）、flex、table-caption或者inline-flex
body 根元素

应用场景

（1）解决外边距塌陷的问题，垂直塌陷
问题：同一BFC下外边距会折叠。
解决方法：让这些元素触发BFC
解决原理：不同的BFC下会解决重叠问题
（独立容器，互不影响）

（2）利用BFC解决包含塌陷
问题：父子关系的盒子，子元素设置外边距会带跑父元素。
方法：父元素触发BFC
解决原理：父元素变成独立区域，其内部操作不影响外部

（3）清除浮动，BF可以C包含浮动元素
问题：浮动元素脱离文档流，父元素失去原来的高度
方法：父元素触发BFC
解决原理：计算BFC的高度时，浮动元素也参与计算。父容器就会包裹着浮动元素，达到清除浮动的效果

（4）BFC阻住标准流元素被浮动元素覆盖
问题：浮动元素会覆盖标准流元素
方法：被覆盖元素触发BFC
解决原理：BFC的区域不会与float box重叠。

（5）阻止多列布局换行的情况
有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况，可以在最后一列触发BFC的形式来阻止换行的发生。（overflow：hidden）

BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个盒子（块盒与行盒）的margin box的左边，与包含块border
box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。 ————————————————
版权声明：本文为CSDN博主「Leon_94」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_36422236/article/details/88763187