<button>タグを必ず<div>で囲む？

Question

<button>タグを必ず<div>で囲む人がこの世界にはいるらしいのですが、他にやっている人いらっしゃいますか？

何か想定される利便性はあるのでしょうか？

こういうときにCSSで便利だとか、JSでこんな機能のとき便利だとか、何か思いつく理由はございますか？

例

<button type="button">クリック</button>

↓こうしたり

<div>
  <button type="button">クリック</button>
</div>

<ul>
  <li>リスト</li><li>リスト</li><li>リスト</li>
</ul>

↓こうしたり

<div>
  <ul>
    <li>リスト</li><li>リスト</li><li>リスト</li>
  </ul>
</div>

Answer 1

HTML4 Strict の話(XHTML 1.0 Strict、XHTML 1.1 でも同様)ではないですか？
button 要素はフォームコントロールなので、form 要素内にあることが多いです。

<form action="#">
  <button type="button">クリック</button>
</form>

form 要素の子としてはブロックレベル要素しか取れないので、このように書いてしまうと誤り(妥当ではない)となります。そこで次のように書き直します。

<form action="#">
  <div>
    <button type="button">クリック</button>
  </div>
</form>

https://www.w3.org/TR/html401/interact/forms.html#h-17.3
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.3

これを見て「必ず<div>で囲む」と思っているのではないでしょうか？
HTML5 では form の子はフローコンテンツとなり、旧来の (X)HTML と比べかなり緩くなっているため直接書くこともできます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form

Answer 2

最近だとVue.jsなどで、divがやたらと増えてしまうのを見たことはあります。

あと例えばボタンの中央寄せする際など
ボタンが複数になる以下のような状況を見越してdivを置いておくことはあります。

<div class="button-group" style="display: flex; justify-content: center;">
  <button type="button">クリック</button>
  <button type="button">クリック</button>
</div>

ulは、やや苦しいですが、以下のようなシチュエーションを想定するならありえるかも、と思います。

<div class="bg-gray" style="background: #eee; padding: 20px;">
  <ul>
    <li>リスト</li><li>リスト</li><li>リスト</li>
  </ul>
  <ul>
    <li>リスト</li><li>リスト</li><li>リスト</li>
  </ul>
  <ul>
    <li>リスト</li><li>リスト</li><li>リスト</li>
  </ul>
</div>

Answer 3

必ずdivで囲う人に会ったことがないので
なんとも言えませんが、
inline要素をblock要素の中に入れておきたいぐらいしか思い浮かばないです。cssで中央寄せが楽とかですかね。