CSS float и авто высота

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, либо варианты будут работать. Если вы хотите избежать этих параметров, вам просто нужно будет сначала установить размеры родительского элемента. Очевидно, что это не всегда лучший вариант, поскольку некоторые элементы будут иметь детей с различными размерами.