一、 BFC的概念

BFC——block formating context的缩写,中文译为"块级格式化上下文"

二、如何触发BFC

1.设置float除none以外的值(left,right)

2.设置overflow除visible以外的值(hidden,auto,scroll)

3.设置display属性(table,table-cell,inline-block,flex)

4.设置position属性(fixed,absolute)

三、BFC的作用

1.可以解决上下margin重叠问题

可以给其中一个元素在外层嵌套一个父容器,并设置overflow:hidden;这样为里面的元素创建了一个块级格式化上下文

2.可以解决高度塌陷问题

父元素高度自适应,子元素浮动脱离文档流,不占据父元素空间,导致父元素高度为0,此时给父元素设置overflow:hidden,闭合浮动,触发了BFC

3.可以实现多栏布局

两个浮动元素相邻,另外一个元素设置overflow:hidden;触发了BFC

相关文章:

  • 2021-10-28
  • 2021-07-20
  • 2021-12-25
  • 2021-09-24
  • 2021-08-26
  • 2021-09-25
  • 2021-11-02
猜你喜欢
  • 2019-07-14
  • 2021-05-16
  • 2021-09-17
  • 2021-10-09
  • 2022-12-23
  • 2021-12-22
相关资源
相似解决方案