how keep family floated elements collapsing?

although elements <div>s customarily grow fit contents, controlling float ability means extraordinary problem css newbies: if floated elements have non-floated progenitor elements, progenitor collapse.

for example:

<div>
  <div style="float: left;">div 1</div>
  <div style="float: left;">div 2</div>
</div>

the progenitor div instance not expand enclose the floated children - seem have height: 0.

how solve problem?

i emanate an downright list solutions here. you're wakeful cross-browser harmony issues, greatfully indicate out.

solution 1

float parent.

<div style="float: left;">
  <div style="float: left;">div 1</div>
  <div style="float: left;">div 2</div>
</div>

pros: semantic code.

cons: competence always wish progenitor floated. even do, boyant parents' parent, on? contingency boyant each foregoer element?

solution 2

give progenitor an eloquent height.

<div style="height: 300px;">
  <div style="float: left;">div 1</div>
  <div style="float: left;">div 2</div>
</div>

pros: semantic code.

cons: stretchable - calm changes browser resized, plans break.

solution 3

append "spacer" component inside progenitor element, this:

<div>
  <div style="float: left;">div 1</div>
  <div style="float: left;">div 2</div>
  <div class="spacer" style="clear: both;"></div>
</div>

pros: candid code.

cons: semantic; spacer div exists wholly plans hack.

solution 4

set progenitor : auto.

<div style=" : auto;">
  <div style="float: left;">div 1</div>
  <div style="float: left;">div 2</div>
</div>

pros: doesn't need additional div.

cons: seems penetrate - that's property's staid purpose.

comments? suggestions?