css, html help: плавайте влево и вправо, обрезая фон, чтобы развернуть прошлое

Question

У меня есть div, плавающий влево, и div, плавающий вправо, и я хотел бы изменить цвет фона. Он меняет фон, но останавливается прямо перед плавающими div. Когда я их снимаю, у него по-прежнему правильный цвет фона, который я хочу.

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
    <div style='width:1091px;margin:0 auto;margin-top:70px;'>
        <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
            float LEFT
        </div>
        <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
            float RIGHT
        </div>
    </div>
</div>

спасибо!

Answer 1

Вы должны очистить поплавки, чтобы родитель мог окружить их.

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
    <div style='width:1091px;margin:0 auto;margin-top:70px;'>
        <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
            float LEFT
        </div>
        <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
            float RIGHT
        </div>

        <!--HERE IS THE CLEARING DIV: -->
        <div style="clear: left;"></div>
    </div>
</div>

Вы также можете сделать сам родительский объект плавающим, и тогда вам не понадобится дополнительная разметка (очистка div).Если вы сделаете это, тогда вашему родителю потребуется указанная ширина.

ОБЪЯСНЕНИЕ:

Когда элемент является плавающим, родитель не знает о его высоте (если только он не является самим плавающим элементом).Вам нужно очистить под плавающей точкой, чтобы родительский div распознал полную высоту всех его дочерних элементов.

Answer 2

Вам не нужно принудительно очищать поплавки - вам нужно только определить переполнение для любой позиции: относительный дел.Переполнение: скрытое и переполнение: автоматическое закрытие div без какого-либо вмешательства, начиная с IE6.

Измените первую строку на:

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'>

, и будет выполнено то же самое, что и принудительное закрытие div.