CSS: DIV, не содержащий высоты на поплавке

предположим, что у нас есть этот код:

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>

Когда содержимое rightDiv и leftDiv передает высоту 200px (минимальная высота) upperDiv не растет, поэтому его содержимое перекрывает нижний div. Если я удалю атрибут float большого контента, он будет расти и возникнут проблемы. Но я не знаю, какой Div (rightDiv или leftDiv) проходит 200px height. Как я могу это исправить?

Спасибо

Ответ 1

Установите #upperDiv любое из следующего:

overflow: hidden;
width: 100%;

или

float: left;
width: 100%;

или создать правило с использованием псевдоэлементов CSS (совместимых с IE8 +), подобных этому

#upperDiv:after {
  content: "";
  display: table;
  clear: both;
}

Лучшее решение
Создание правила повторного использования, как показано ниже.

.group:after {
  content: "";
  display: table;
  clear: both;
}

Теперь вы можете применить его ко всему, что нуждается в этой же функциональности. Например...

<div id='upperDiv' class="group" ... >

P.S. Если вам нужна совместимость с IE 6/7, проверьте этот пост.

Ответ 2

Это преднамеренно, поскольку поплавки предназначены для таких вещей, как изображения в параграфах (где несколько абзацев могут обертываться вокруг изображения).

Сложная спираль имеет более полное объяснение о том, почему и Эд Эллиот описывает ряд чтобы контейнеры расширялись вокруг поплавков. Я считаю, что подход overflow: hidden работает лучше всего в большинстве ситуаций.

Ответ 3

После

 <div id='leftDiv' style='float:left;width:25%;'>
   content2
 </div>

добавить

     <div style="clear:both"></div>

Это решит вашу проблему.

Ответ 4

Недавно было введено новое свойство display: flow-root;, которое исправит эту проблему без каких-либо взломов и получит почти всю основную поддержку

<div id='upperDiv' style='border: 1px solid #000000; display: flow-root;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>