CSS: DIV, не содержащий высоты в наборе с плавающей точкой - PullRequest
Новая
       21

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

19 голосов
/ 24 октября 2010

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

<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. Как я могу это исправить?

Спасибо

Ответы [ 3 ]

44 голосов
/ 24 октября 2010

Установите #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" ... >

PS Если вам требуется совместимость с IE 6/7, закажите этот пост .

8 голосов
/ 24 октября 2010

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

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

7 голосов
/ 09 марта 2013

После 

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

add 

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

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

...