ブロックの内部要素にfloatを入れるとうまく囲えない

• ブロック要素の内部にfloat要素を追加した際、親要素が子要素を囲えるようにする

<div id="parent" style="border: 1px dotted #888888; width: 600px;">
  <div id="child" style="border:1px dotted #990000; width: 500px; height:50px; float:left;">ゼルダの伝説久しぶりにやりたいな！突き出なかったらやろうかな・・・</div>
</div>

↓実行結果

上記のように、親要素が子要素をうまく囲めていないことがわかる。
親要素 (parent) にheightを指定すれば、きちんとparent内部にchildが入るけど、それでは高さが可変できない。
高さを可変にするには、親要素 (parent) にoverflow: hidden;を付け加えるだけでうまくいきます( • ̀ω•́ )✧

<div id="parent" style="border: 1px dotted #888888; width: 600px; overflow: hidden;">
  <div id="child" style="border:1px dotted #990000; width: 500px; height:50px; float:left;">ゼルダの伝説久しぶりにやりたいな！突き出でなくなったからやろうｗ</div>
 </div>

↓実行結果

しっかりと囲めてます。親要素に、overflow: hidden;を忘れないようにしましょう(｡･ω･｡)