div 裡面元素的 float 時，讓 div 高度也能隨著裡面元素一起變動

假設 div 裡面有兩個小 div，兩個小 div 是 float 浮動的。
此時外層 div 高度不會跟裡面的兩個小 div 變動。如下

<div style="border-style:solid;border-color:red;">
  <div style="border-style:solid;border-color:blue;width:100px;height:100px;float:left;">1</div>
  <div style="border-style:solid;border-color:blue;width:100px;height:100px;float:left;">2</div>
</div>

1

2

解決此問題，可在外層 div 加上 overflow:auto;

<div style="border-style:solid;border-color:red; overflow:auto;">
<div style="border-style:solid;border-color:blue;width:100px;height:100px;float:left;">1</div>
<div style="border-style:solid;border-color:blue;width:100px;height:100px;float:left;">2</div>
</div>

1

2

參考：
How to make a div grow in height while having floats inside