解决Magin 边距塌陷问题 BFC

11 阅读1分钟

问题描述,当两个相邻盒子都设置margin,A设置margin-left:200px,B设置margin-right300px,按照预期想法中间间隔应为500px,实际两者边距重叠取最大数值300px,符合CSS外边距合并规则,但是我们希望间隔为500px时,则需要为每一个盒子触发BFC即可 BFC为块级格式化上下文,是一个独立渲染区域,与外边元素互不影响。
触发BFC方式存在以下几种

  1. 设置float浮动且值不为noe
  2. 设置position只是absolute fixed
  3. 设置display为inline-block
  4. overflow值不为visible