Overflow:hidden and margin:right?

Question

css

The question arose: for example, two texttext blocks.
The first has float:right;width:100px;margin-left: 20px;.....
And the second has overflow: hidden;
The question is why, when adding an overflow hidden, the second block begins to take into account the width and margin of the block with float?

<div style="float:right;margin-left:20px;">
  <input type="submit" />
</div>
<div style="overflow:auto;">
  <input type="search" style="width:100%;">
</div>

codepen.io/ddimonn8080/pen/RrVMGg

Answer 1

in short: https://developer.mozilla.org/ru/docs/Web/Guide/CS...
in more detail: cssing.org.ua/2010/04/26/overflow-hidden