谈谈对你对BFC的理解呢

谈谈对你对 BFC 的了解？

它是什么？

书面解释：BFC (Block Formatting Context) 这几个英文拆解

• Block: Block 在这里能够了解为Block-level Box, 指的是块级盒子的规范
• Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规定，它决定了其子元素将如何定位，以及和其余元素的关系和相互作用
• BFC是指一个独立的渲染区域，只有 Block-level Box 参加，它规定了外部的 Block-level Box 如何布局，并且与这个区域内部毫不相干.

它的作用是在一块独立的区域，让处于 BFC 外部的元素与内部的元素相互隔离.

如何造成的？

BFC 触发条件:

• 根元素，即 HTML 元素
• position 的值, 为 fixed/absolute
• float, 不为 none
• overflow, 不为 visible
• display 的值为 inline-block、table-cell、table-caption

作用是什么呢？

• 避免 margin 产生重叠

案例地址：https://codepen.io/xiaomuzhu/pen/NZGjYQ

• 两栏布局，避免文字盘绕等

案例地址：https://codepen.io/xiaomuzhu/pen/XLmRPM

• 避免父级元素塌陷

案例地址：https://codepen.io/xiaomuzhu/pen/VJvbEd

Can you talk about your understanding of BFC ?

What is it ?

Explanation: BFC (Block Formatting Context)

• Block: Block can be understood as Block-level Box here, which refers to the standard of block-level box
• Formatting context: block-level context formatting, it’s a rendering area in the page, and has a set of rendering rules, which determines how its child elements will be positioned, as well as the relationship and interaction with other elements
• BFC refers to an independent rendering area. Only the Block-level Box participates. It specifies the internal Block-level Box how to lay out and has no relationship with the outside of this area.

Its function is to isolate the elements inside the BFC from the outside elements in a separate area.

How is it formed ?

BFC trigger conditions:

• Root element, ie HTML element
• position: fixed/absolute
• float is not none
• overflow is not visible
• The value of display is inline-block, table-cell, table-caption

What is the role?

• Prevent overlap of margins

https://codepen.io/xiaomuzhu/pen/NZGjYQ

• Two-column layout to prevent text wrapping, etc.

https://codepen.io/xiaomuzhu/pen/XLmRPM

• Prevet element collapse

https://codepen.io/xiaomuzhu/pen/VJvbEd