谈谈对你对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