JavaScript CSS clientHeight

Question

問題再現できないのですが、思い浮かぶことがあれば教えてください
下記コードのdiv2.innerHTML="あ<br>あ";の文字に<br>を入れるとclientHeightの値が変わってしまいます

あ→20px
あ<br>あ→40px
あ<br>あ<br>→60pxのようになってしまいます
赤い領域の高さが広がっていないにも関わらずです

原因が不明です
わかることがあれば教えて下さい

<style>
body,html{
height:100%;
}
</style>

<script>
window.onload=function(){
var div = document.createElement('div');
div.id="a";
div.style.width="100%";
div.style.height="20%";
div.style.borderRadius="10px";
div.style.background="red";
document.body.appendChild(div);


var div2 = document.createElement('div');
div2.style.background="blue";
div2.style.width="100%";
div2.style.height="20%";
a.appendChild(div2);


var div2 = document.createElement('div');
div2.id="divx";
div2.innerHTML="あ<br>あ";
div2.style.width="100%";
div2.style.height="60%";
a.appendChild(div2);


var div2 = document.createElement('div');
div2.style.background="blue";
div2.style.width="100%";
div2.style.height="20%";
a.appendChild(div2);

alert(divx.clientHeight);

}
</script>