共计 1605 个字符,预计需要花费 5 分钟才能阅读完成。
谈谈对你对 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 asBlock-level Box
here, which refers to the standard ofblock-level
boxFormatting 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 elementsBFC
refers to an independent rendering area. Only the Block-level Box participates. It specifies the internalBlock-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
正文完