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