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 превышает высоту 200 пикселей (минимальная высота), upperDiv не увеличивается, поэтому его содержимое перекрывает нижний div. Если я удалю атрибут float большого содержимого, оно будет расти, и возникнет проблема. Но я не знаю, какой Div (rightDiv или leftDiv) имеет высоту 200 пикселей. Как я могу это исправить?

Спасибо


html css overlap height
person Ariyan    schedule 24.10.2010    source источник

Ответы (4)


arrow_upward
45
arrow_downward

Установите #upperDiv любой из следующих параметров:

overflow: hidden;
width: 100%;

or 

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, ознакомьтесь с этим сообщением.

person jessegavin    schedule 24.10.2010

arrow_upward
8
arrow_downward

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

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

person Quentin    schedule 24.10.2010
comment
Это хороший поясняющий ответ. Хорошие ссылки. +1 - person jessegavin; 24.10.2010
comment
Я никогда полностью не понимал хаки clearfix, пока не прочитал эту статью о сложной спирали. Должен прочитать! - person thinkOfaNumber; 16.05.2017

arrow_upward
7
arrow_downward

После

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

Добавить

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

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

person PJunior    schedule 09.03.2013

arrow_upward
2
arrow_downward

Недавно было представлено новое свойство 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>

person Ismail Farooq    schedule 20.09.2019