Авто высота и поплавок

Question

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

Мне нужно создать сценарий, в котором у меня есть 2 DIV, плавающие слева и справа внутри родительского DIV. 2 плавающих 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>

Для решения этой проблемы доступны другие варианты.

Answer 2

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

USE display: inline-flex а не плавает и будь счастлив.

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

Answer 3

Без добавления бессмысленного HTML-элемента вы можете очистить плавающий путь переполнения

<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, это зависит от ваших конкретных потребностей. IE7 - не понимает этого значения, но это нормально, если вы даете IE6 и 7 display: inline; zoom: 1;. И если вы все еще поддерживаете Fx 2, есть и альтернатива.