jeddygong / frontend-document

前端每日一练,大厂面试题目,涵盖前端所有知识点,每天进步一点点。HTML/CSS/Javascript/Nodejs/Typescript/ECMAScript/Vue/React/Webpack/小程序/网络/设计模式/数据结构/算法/安全/工程化/性能优化
https://jeddygong.github.io/frontend-document
MIT License
10 stars 4 forks source link

[CSS] [2021-02-23 更新] BFC是什么?触发BFC的条件是什么?有哪些应用场景? #26

Open jeddygong opened 3 years ago

jeddygong commented 3 years ago

1.概念

BFC(Box Formatting context ):  Box是csS布局的对象和基本单位,BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

​ 块级格式化上下文布局规则

2.触发条件

触发条件简要概括:

触发条件详细介绍:

  1. 根元素
  2. 浮动元素(元素的float不是none)
  3. 绝对定位元素(元素的position 为absolute或fixed)
  4. 行内块元素(元素的display为inline- block)
  5. 表格单元格(元素的display为table- cell, HTML表格单元格默认为该值)
  6. 表格标题(元素的display为table- -caption,HTML表格标题默认为该值)
  7. 匿名表格单元格元素(元素的display为table、 table-row、table- -row- group、table -header- group、table- footer- -group (分 别是HTML table、row、tbody、thead、tfoot的默认属性)或inline-table)
  8. overflow 值不为visible 的块元素
  9. display 值为flow- -root 的元素
  10. contain 值为layout、 content或paint的元素
  11. 弹性元素(display为 flex或inline- -f1ex元素的直接子元素)
  12. 网格元素(display为 grid或inline- -grid元素的直接子元素)
  13. 多列容器(元素的column- count或column- -width 不为auto, 包括column- count为1)
  14. column- -span为all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一一个多列容器中(标准 变更,Chrome bug)。

3.应用场景

1、清除内部的浮动,触发父元素的BFC属性,会包含float元素;

​ 防止浮动导致父元素高度塌陷父级设置overflow:hidden,元素float:right;

2、分属于不同的BFC,可以阻止Margin重叠;

​ 避免margin重叠,两个块相邻就会导致外边距被折叠,给中 间的设置BFC就会避免,方法就是套个父级设置overflow: .hidden

3、阻止元素被浮动元素覆盖,各自是独立的渲染区域;

4、自适应两栏布局