为何选中包裹块级元素的<a>标签时浏览器包含相邻元素且出现margin折叠？

1. 选中第一个<a>时后续<a>也被选中的原因 #

按照HTML的规则，<a>标签默认是内联元素，内联元素不能直接包裹<p>这种块级元素。当你硬把<p>塞进<a>里时，浏览器会自动修正这个不符合规则的代码——它会把第一个<a>的闭合标签提前，导致后面的<a>被错误地包含进第一个<a>的范围里，所以选第一个的时候，后面的也跟着被选中。

浏览器实际解析后的DOM结构大概是这样：

<div class="box2">
  <a href="#"></a>
  <p><a>abc</a></p>
  <a>abc</a>
</div>

（不同浏览器的修正逻辑可能略有差别，但核心都是因为违反了内联元素的嵌套规则，DOM结构被破坏了）

2. <a>内<p>的margin与.box2折叠的原因 #

垂直方向的margin折叠需要满足几个核心条件：两个元素都是块级、没有被border/padding/非块级元素隔开，也没有BFC（块级格式化上下文）隔离。

这里因为浏览器修正后，<p>的父元素要么不再是<a>，要么<a>作为内联元素没法创建BFC来隔离margin，结果就是<p>的margin-top直接“穿透”了父元素，和.box2的顶部margin合并到一起，形成了折叠效果。

如果要解决这两个问题，简单的办法是：

• 给<a>加display: block;，让它变成块级元素，这样就能合法包裹<p>，DOM结构不会被浏览器乱改；
• 给.box2或者<a>设置overflow: hidden;、display: flow-root;这类属性创建BFC，就能阻止margin折叠。

内容的提问来源于stack exchange，提问作者Dasheng