Web页面布局上的幽灵事件 -- 外边距合并折叠解惑

最初的想法是准备写BFC的设计方面的一些考虑，当然这只是从一个使用者角度来理解的设计虽然会跟实际有一定差距，但对于能更好的来理解记忆BFC还是有用处的。

现在确定了要写的东西跟最初有些不同，但是很典型容易被忽略三哥哥觉得有必要写一下,虽然内容并不多希望会对大家有帮助。

还是直接说问题吧，由此再引出一系列疑问出来

问题：我们如何去掉两个相邻块级元素的边距折叠呢？不知道什么是边距折叠的小伙伴可以单独去了解一下
这个问题再进一步明确一下，这里没有子元素，只有两个单独的块级元素。

相信网上能找到解决办法，但是应该很少有说明为什么或者即使说了也是一堆让人理解困难的、难以形成整体印象的解释，今天所三哥哥写的就是这个通俗易懂，让问题环环相扣，叫大家酣畅淋漓一口气知道“为什么”

要怎么做呢？可以把其中一个块级元素转换为内联块级元素，指定display:inline-block 属性（这样指定同时也会触发BFC），为什么这样就可以了呢？

在边距折叠描述上，其中有一点说的是“块级元素”之间，这是容易被大家忽略的细节，反过来也就是说只要有一个是非块级元素，那么折叠就不会发生。

接下来可能还会有新的疑问产生：刚才提到指定display:inline-block 属性会触发BFC，那么是不是只要触发BFC 边距折叠就不会发生了呢？通过实验发现并不是这样的。

总结一下：边距折叠跟BFC没有关系，只跟是否是块级元素有关。就算是触发BFC，那么这个元素也可能依然是块级元素所以边距折叠依然会发生。

哦，太糟糕了新问题又来了，那我怎么知道哪些情况下会生成内联块级元素呢？有几个现成的可以记住，绝对定位、浮动、display:inline-block 属性都会生成它（同时也会触发元素的BFC）。

通过内联块级元素的特性来判断：默认没有宽高时会收缩，大小由内容撑开；横向排列；可设置宽高、内外边距和边框；所以对比以上提到的几种情况，被那几种情况改变的元素都有这样的性质

这里只是通过边距折叠来进一步完善我们在布局上错过的细节，其实很多文章都提到过块级元素或者块级盒子，所以小伙伴们一定一定要留意描述上的限定用词“块级”

如果今后有哪些地方出现了你不能理解的行为，那么一定要回头看看这些个描述限定词，脱离了限定范围规则也就变化了。

其实，外边距合并或叫做外边距折叠是分两种情况的 1.父子元素嵌套 2.兄弟元素之间，三哥哥这次写的是第属于二种情况的

让我们再来熟悉下这些常见的名词：块级元素块级盒子，行内元素行框线框线盒，内联元素内联块级元素
很多都是我们自己翻译后的各种叫法，归根到底大家只需要知道：

盒子模型是什么，盒子模型从内到外由内容区content、内边距padding、边框border、外边距margin组成。分为块级盒子block box，块级盒子又有个叫BFC属性或叫特性的东西；行盒又叫行框线框线盒 line box，行盒里边包裹着具体的行内元素inline如等，行盒又有个叫IFC属性或叫特性的东西。

使用元素这个词来指代具体的东西(标签)：块级元素(< div> < p> < address> < h1>等)、内联块级元素(inline-block)(< img> < input>等)、内联元素(inline)（即行内元素< a> < span>等）

记住：边距折叠只发生在垂直、相邻的、块级元素之间（即:发生在普通文档流内）

上边提到的第一种父子嵌套的外边距合并情况，还会有其他几条限定规则，这里暂不介绍了，比较简单容易理解。

原始真解，让理解变得更简单。

纵然你成为路尽级高手，某一天发现依然有敌

感谢光临阅读，今天的你学废了吗？学废了记得点赞收藏支持一下

2021.1.19