关于BFC

Posted 2020-10-04 前端小记

box类型	display属性值	相关渲染容器
block-level	block/list-item/table/inline-block	block formatting context(BFC)
inline-block	inline/inline-table	inline formatting context(IFC)
run-in

 

 

 

formatting context 是一个页面中的一块渲染区域，决定了子元素将如何定位，以及和其他元素的关系和相互作用

BFC特点： 不管内部什么样的布局，与外界无关

布局规则：

1. 内部box会在垂直方向排列
2. 垂直方向的间距由margin决定
3. 同一个BFC的两个相邻box margin属性值会重叠
4. BFC不会与float box 重叠
5. 容器里的元素不会对外界环境产生影响
6. 计算BFC高度，浮动元素也参与计算

产生BFC的情况

1. 根元素
2. float 属性 不为none
3. position 属性 为 absoluted/fixed
4. display 属性为 inline-block/table-cell/table-caption/flex/inline-flex
5. overflow 属性不为 visible