When child divs are floated, parent divs lose auto

问题:

I have a parent div called main. It has a bunch of child divs in it, which I floated left or right.

When I finished floating the last one, the height of the main div completely vanished, throwing off the layout of my page. I gave it a height:100%; just for now, but it will be overly tall on most resolutions. How can I keep it at a fluid height, only as much as needed to contain the elements?

回答1:

Contain your floats.

On the div called main add overflow:hidden;. That should contain it.

回答2:

Are you using relative positioning for your floats?

You'll need to put a fake div in to "hold open" the parent div otherwise. As soon as everything is floated you will lose all basis for height in the parent div. (Nothing is in there.)

回答3:

inserting "overflow:hidden;" into parent div worked for me.