html - Why margin-left of a Block Formatting Context element cannot get a same result as margin-right of a float element?

Question

Here is my code:

.wrapper {
  border: 1px dashed red;
  overflow: auto;
  /*clear floating*/
}

.left {
  width: 120px;
  border: 5px solid #ddd;
  float: left;
  margin-right: 20px;
}

.right {
  border: 5px solid #ddd;
  overflow: auto;
  /*make div.right become a new BFC*/
}

<div class="wrapper" id="wrapper">
  <div class="left">This is a float div, width 120px.</div>
  <div class="right">This is a div.</div>
</div>

Answer 1

The relevant part of the spec is https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float which says:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

Which gives browsers a bit of latitude in what they actually do here, but the point is, if they place the BFC next to the float, the Border Box of the BFC must not overlap the Margin Box of the float. So changing the size of the margin on the BFC won't impact on that constraint, but changing the size of the margin on the float will.