CSSを学習中のものです。1点、よく理解出来ないところがありましたので、どなたか理解を深める為にお力を貸して頂けないでしょうか？

以下の#no2のwidthがfloatがついた#no1のwidth以下であった場合、#no2は#no1の下にブラウザー上で表示されます。

---------
| no1 |
| no2 |
---------

#no2のwidthが#no1のwidthよりも大きい場合は#no2の右側に#no2のコンテンツが回り込みますが、逆の場合は回り込みが起こらず、そのまま、下に表示されるようでした。

この時なのですが、no2にはclearを設定しておりませんが、no1とno2を囲っている#wrapperの高さもno1とno2の高さを含んだ高さに自動で調整されています。

no2にclear:bothを設定していれば、#wapperの高さがno1とno2の両方をふくむ高さになると思うのですが、なぜ、no2にclear:bothをかけてないのに、両方の高さを自動でふくんでくれるのでしょうか？

これは、floatをかけた要素の横幅よりもその後続のfloatをかけてない要素の横幅が小さい時は、その後続の要素にclear:both（or left or right)が自動でかかっているようなものだと解釈しておけば良いのでしょうか？

#wrapper {
background: orange;
border:1px solid gray;
}
#no1 {
float: left;
width:100px;
background: yellow;
}
#no2 {
width:100px; // 1以上100以下の値
background:red;
}

<div id="wrapper">
<div id="no1">1あああああああああああああ2</div>
<div id="no2">1あああああああああああああ2</div>
</div>

-----
追記1
-----
ブラウザーはmacのchrome最新バージョンとなります。

-----
追記2
-----

#no2にmargin-topを例えば20pxのような小さい値を入れても、#no1との間にマージンは生まれません。ただし、#no2のmargin-topに100pxくらいの大きめな値を入れてあげると、#no1との間にマージンが生まれます。

上記の表現は適切ではないですが、この現象は#no2にclear:bothのような回り込み解除の処理を行なった時に起こるものと同じです。
※no2のmargin-topがwrapperの包含ブロック上辺を起点に生まれていることは理解しております。

なので、floatを設定した要素の後続要素の幅が回り込みが行なわれないような小さい幅の場合は、clear:bothのような回り込み解除の処理がされているのと同じ状態になるのかなと感じたのですが、どういうことになるのでしょうか？