CSS浮动和自动高度

Question

当子元素使用height:auto;或float:left;时，如何获取父元素float:right？

父

#parent {
    width:100px;
    height:auto;
        padding-bottom:10px;
        background:#0F0;
}

child_left

#child_left {
    width:50%;
    height:50px;
        float:left;
            background:#00F;
}

小提琴：http://jsfiddle.net/27EWw/

Answer 1

元素的默认高度为auto，但您似乎在寻找一个clearfix。如果元素的子元素被浮动，它们基本上被从文档流中取出，因此如果父元素没有定义的维度，它将自行折叠。您可以将overflow:auto添加到父元素：

EXAMPLE HERE

#parent {
    width:100px;
    overflow:auto;
    padding-bottom:10px;
    background:#0F0;
}

或者您也可以使用clearfix：

EXAMPLE HERE

#parent:after {
    clear:both;
    display:table;
    content:'';
}

你也可以有一个clearfix类，任何一个选项都可以。如果您想避免使用这些选项，则只需首先在父元素上设置尺寸。显然，这并不总是最好的选择，因为有些元素会有不同尺寸的孩子。