Авто высота и проблема с поплавком

Question

У меня была эта проблема раньше и не могу вспомнить, как и как я ее исправил.

Мне нужно создать сценарий, в котором у меня есть 2 DIV, расположенных слева и справа внутри родительского DIV. У двух плавающих DIV есть высота: auto, но родитель игнорирует их (совершенно логично), а фон родительского DIV не может быть замечен. Я знаю, в чем проблема, но есть ли какие-либо предложения по ее решению? Или любые альтернативы, я готов попробовать новый подход.

Заранее благодарим за любую помощь.

Answer 1

Вам нужен clear:float в DIV внутри родительского DIV:

.clear 
{ 
    clear:both; 
} 

<div id="parent"> 
<div id="left"></div> 
<div id="right"></div> 

<div class="clear"></div> 
</div> 

There are more options available to solve this problem.

Answer 2

С не бессмысленный HTML элемент должен быть добавлен, вы можете clear floats the overflow way

<style type="text/css" media="screen"> 
    #allmychildrenfloat { 
     overflow: hidden; 
    } 

    #allmychildrenfloat p { 
     float: left; 
    } 
</style> 
<div id="allmychildrenfloat"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec leo arcu, iaculis at, ultricies et, porta eget, urna. Nulla facilisi.</p> 
    <p>dolor sit amet lorem ipsum</p> 
</div> 

Или вы может использовать display: inline-block; вместо свойства float, это зависит от вашего точного ne ред. IE7 - не понимает этого значения, но это нормально, если вы даете IE6 и 7 display: inline; zoom: 1;. И если вы все еще поддерживаете Fx 2, есть и альтернатива.

Answer 3

Я знаю, что поздно поздно ответить на этот вопрос, но каждый, кто придет сюда после меня, может извлечь выгоду из этого ответа.

ИСПОЛЬЗОВАНИЕ display: inline-flex вместо поплавков и быть счастливым.

Примечание: вам необходимо проверить поддержку значения inline-flex