我把overflow设置为hidden,为什么外边距还是合并了呢？想通过生成BFC来阻止外边距合并！

Question

代码链接

Answer 1

设置了的overflow属性的盒模型，是和其子元素之间的垂直margin不会合并，但其与父元素之间、与相邻元素之间的margin会合并
设置了display:inline-block或float:left或position:absolute的相邻元素之间margin不会合并

Answer 2

BFC触发的是内部隔离，也就是box1内部的和box2内部的不会再进行外边距折叠，但是box1和box2此时还是处于同一个容器，如果要利用bfc实现你要的目的 应该是给box1或者box2（当然两个都加也可以）外面加上一层容器，然后让这层容器触发bfc

Answer 3

这些答案就没有一个贴切问题的，甚至根本都不知道人家在问啥。。。
只有 陌路凡歌 回答了一下表面现象

楼主明显是受到了一些博客中对于BFC描述用词并不准确的影响...
如一些博客中描述会生成BFC的情况：
哪些元素会生成BFC?
根元素
1、float属性不为none
2、position为absolute或fixed
3、display为inline-block, table-cell, table-caption, flex, inline-flex
4、overflow不为visible

试着解答LZ的疑惑
原因1：
“生成BFC”————这句话本身就不对，准确来讲应该是生成新的BFC，不同BFC之间毗邻margin才不会合并。
并且一个元素，比如元素A，通过这些css属性生成了新BFC，作用的不是A元素自身，而是其内部环境。
即A元素的所有子元素都是新的BFC，A元素本身还是原来的BFC，自然会和同级的相同BFC的兄弟元素毗邻margin进行合并

原因2：LZ的例子里，如果把box1的overflow: hidden属性替换成display: inline-block, 不用建立子元素，box1和box2的margin就不合并了，LZ肯定疑惑过这一点才上来提问。因为明明都是创建新BFC来防止margin合并，为啥overflow: hidden和display:inline-block效果不一样，后者可以少套一层？
原因是类型转换为inline-block时其实已经归属于行框模型，这就牵扯到另一个IFC的概念。整个行框模型是不存在margin合并的，生成的新BFC可以看做是行框模型生成了BFC，此时box1已经作为行框模型内部的一个子元素了。。。

Answer 4

overflow之后，box1和其子元素就不会垂直外边距合并了，与它同属一个BFC的没影响。

Answer 5

当 box 的大小是固定的，而且当 content 内容变多，多到 box 不能容下的时候，也就是溢出（overflow）的时候，才是overflow这个属性才有发挥价值的时候。

overflow一共有三个值可以设定
auto: 自动隐藏溢出部分，而且显示scroll bar用于控制显示
hidden: 也就是题主用的这种，直接隐藏，没有 scroll bar
visible: 默认情况，直接显示溢出部分

这是overflow的一般使用场景。

题主给出的例子，box1 和 box2 均没有发生溢出，所以overflow的区别也没有显示出来。
题主是否遗漏了其他说明信息？或者具体描述一下使用场景和目的？

Answer 6

看不懂你的问题，overflow hidden 是限制子div的范围，超出范围隐藏

Answer 7

两个并列的盒子,关于他们的外边距,两者中取一个,而且是较大的一个.如果两个外边距,他们就重合了.
图片如下.希望可以理解.

Answer 8

overflow可以解决处理浮动问题，你可能是弄错了。
margin是属于盒子模型，相邻的盒子在上下排布时外边距以大的为主，这是css排布问题，你可以查看下css属性。

Answer 9

1.通过BFC 阻止外边距合并，条件是他们属于不同的BFC，他们之间的上下边距才不会合并；
而此时 box1 和box2还属于同一个 BFC， 毗邻盒子的垂直外边距折叠只有在同一个BFC时才会发生；
2.解决方法：
box2用div 包括，并设置overflow:hidden;