Grow height of parent div that contains floating nested divs

问题

I can’t seem to auto-grow my parent div’s height based on its floating child divs. All the children are floating, to take up space horizontally, and then wrapping to the next line. There can be a changing number of floating children, and the parent has to auto-size its height. (The parent div serves as a background for all the floating divs). There is also a second div below the parent div that needs to be pushed down, so that it is below the floating divs.

It’s of major importance that the solution works in IE.

回答1:

If the parent container only has floating children, it will have no height. Adding the following CSS to the parent container should help:

.parent {
    overflow:hidden;
    width: 100%;
}

Read this article for more: http://www.quirksmode.org/css/clearing.html.

回答2:

You could insert a div that clears the floaters after the last child.

HTML:

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->

fiddle: http://jsfiddle.net/Rc5J8/

回答3:

You need to clear floated elements the height of their parents will collapse.

The current accepted answer is correct, however it's usually a better idea to clear floats by applying the clearfix hack or overflow: hidden to a wrapping parent element so that margins continue to functions as expected, and to get rid of an empty HTML element.

The `overflow`-method:

CSS:

.wrap { overflow: hidden }
.box  { float: left; }

Markup:

<div class="wrap">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

The `clearfix`-method, as linked above:

CSS:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

.box { float: left; }

Markup:

<div class="wrap cf">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

回答4:

You should use the clearfix technique on the containing div

http://www.webtoolkit.info/css-clearfix.html

That removes the need to add extra markup.

回答5:

Adding the overflow css property on the parent element will fix the issue (no need for an empty & ugly div element to clear the float) :

.parentelement {
    overflow:auto;
    display: block;
    width: 100%;
}

I added the display and width properties because some browsers will need theses properties to be defined.

回答6:

You need to apply clearfix to the parent as floats are removed from the flow of the document an don't automatically add any height to the parent's contents. Clearfix instructs teh parent to extend to a height tall enough to clear its last floated child. This method is well established and works across browsers.

来源：https://stackoverflow.com/questions/9463069/grow-height-of-parent-div-that-contains-floating-nested-divs

标签

html

css

styles