BFC与IFC

参考链接:
https://segmentfault.com/a/11...
https://juejin.im/post/59b73d...
面试之CSS篇 - 边距重叠与BFC

基础知识

块级元素与块元素

块级元素

块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。例例如：display属性为block, list-item, table, flex, grid。

块元素

块元素是 display 属性值为 block 的元素，它应该是 块级元素 的一个子集。

行内级元素与行内元素

行内级元素

行内级元素是那些不会为自身内容形成新的块，而让内容分布在多行中的元素。
例如：display属性为inline, inline-table, inline-block, inline-flex, inline-grid。

行内元素

行内元素仅仅是display属性值为inline的元素。

置换和非置换元素

置换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容。
常见的置换元素有这些：img,input,textarea,select,button等

置换元素宽度定义

• 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度
• 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度
• 若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width的使用值为“高度使用值 * 固有宽高比”

比如img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置

• 除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px

比如iframe, canvas#####置换元素高度定义

置换元素高度定义

• 若宽高的计算值都为 auto 且元素有固有高度，则height的使用值为该固有高度
• 若高度的计算值为 auto 且元素有固有高度，则height的使用值为该固有高度
• 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值/固有宽高比
• 若高度的计算值为 auto 且上述条件完全不符，则height的使用值不能大于150px，且宽度不能大于长方形高度的2倍

非置换元素

浏览器中的大多数元素都是不可置换元素，即其内容直接展示给浏览器。

非置换元素，宽度设置是不适用

BFC

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。

BFC就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此

触发BFC

• 根元素
• float的值不为none
• overflow的值为auto,scroll或hidden
• display的值为table-cell、table-caption、inline-block、flex 或 inline-flex
• position的值不为relative和static

BFC布局规则

1. 内部的盒子会在垂直方向，一个个地放置
2. 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠
3. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
4. BFC的区域不会与float重叠
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
6. 计算BFC的高度时，浮动元素也参与计算

IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"。

IFC布局规则

1. 在一个IFC中，从父级元素的顶部开始，盒子一个接一个横向排列
2. 一个line box总是足够高对于包含在它内的所有盒子。然后，它也许比包含在它内最高的盒子高
3. 当盒子的高度比包含它的line box的高度低，在line box内的盒子的垂直对齐线通过'vertical align'属性决定
4. 当在一行中行内级盒子的总宽度比包含他们的line box的宽度小，他们的在line box中的水平放置位置由'text align'属性决定
5. 当一个行内盒子超过了line box的宽度，则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs