1

面试笔记

bfc ifc gfc ffc

bfc:块级格式上下文，body标签里渲染的区域，里面的子元素在布局上不会影响外面的元素。浮动元素:float除了none 以外的值；绝对定位元素position(absolute fixed);display(inline-block table-cells
flex) ;overflow(hidden auto scroll)会触发bfc渲染规则。

• 为两个兄弟div中的一个设置overflow hidden；可以让两个不在同一个bfc 可以避免两者之间的margin叠加；

  如果子元素脱离文档流，float left；为父元素设置overflow hidden；可以避免高度塌陷；

  阻止元素被浮动元素覆盖，设置浮动的元素会覆盖不设置的元素，后者的文字环绕前者块，后者设置overflow
  hidden；可以将后者与前者并排排列，前者覆盖不了后者。

• ifc：内联格式上下文，如p标签。

  gfc :网格布局格式化上下文。diaplay:grid;

  ffc：自适应格式化上下文，diaplay:flex,inline-flex;

display:none visibility:hidden opcity:0

display:none 不占用空间，无法进行dom事件监听，visibility:hidden

占用空间，无法进行dom事件监听 opcity:0 占用空间，进行dom事件监听