CSS-外边框合并(marin collapsing)的原因及解决办法

css有一些特殊的现象，需要我们去解决，今天说的就是外边距margin合并问题。

1.父子元素的外边距折叠

下面的代码，父子外边距的和应该是20+20=40px，而实际上表现出来却是20px。

image.png

解决办法一：

父元素触发BFC
为什么是父元素呢？我认为是父元素触发了BFC，影响的是里面的元素。这样里面的inner1才能不受外界影响。包括父元素的margin。
如果设置在子元素inner1，inner1里面没有其他元素，是没有意义的。

什么是BFC？
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

好吧，上面是官方的定义,我也看到吐了。可以简单理解为某些容器，一旦触发了某些条件，它就会形成一个独立的盒子，这个盒子里的样式是不会受外界影响的。

什么条件能触发BFC呢？

• float属性不为none.
  float会对父元素的布局产生影响，不使用
• position属性不为absolute或fixed
  position会对父元素的布局产生影响，不使用
• display属性为下列之一:table-cell,table-caption,inline-block,flex,or inline-flex.
  会改变元素原本的属性，不适用
• overflow属性不为visible.
  建议使用overflow:hidden

.ct1{
    border: 2px solid black;
    width: 500px;
}
.outer1{
    background: pink;
    margin: 20px;
    overflow: hidden;
}
.inner1{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 20px;
}

image.png

解决办法二：

阻断父元素的margin与子元素的margin接触
比如设置border/padding等等

2.兄弟元素的外边距合并

image.png

解决办法1：可以给兄弟元素添加一个父元素，让它触发BFC。

image.png

解决办法2：

避免兄弟元素之间的margin接触，比如设置单方向的margin等.

以上~~~