Когда должен быть переполнен: скрытый быть использован для <div>? - PullRequest
Новая
       7

Когда должен быть переполнен: скрытый быть использован для <div>?

3 голосов
/ 30 января 2010

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

<div class="a">
 <div class="floated-left">...</div>
 <div class="floated-left">...</div>
</div>

Я заметил, что если я не установлю overflow:hidden на .a, то <div class="a"> не займет вертикальный размер. Например, если я установил его фон на красный, он вообще не будет виден. Проверка его с помощью FireBug показывает, что он есть, но вертикального размера почти нет.

Чтобы исправить это, я обнаружил, что должен установить overflow:hidden на .a. Затем первый <div> перебирает все свое содержимое.

Вот реальный пример: 

<html>
<head>
  <style>
    .a { background-color: red; }
    .b { background-color: red; overflow: hidden }
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
  </style>
</head>

<body>
  <p>div with class a, that doesn't overflow:hidden:</p>
  <div class="a">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Mom!</div>
  </div>

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

  <p>div with class b, that does overflow:hidden:</p>
  <div class="b">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Dad!</div>
  </div>
</body>
</html>

Обратите внимание, что Hi, Mom! не получает красный фон (без переполнения: скрытый), в то время как Hi, Dad! получает красный фон (имеет переполнение: скрытый).

Может кто-нибудь объяснить это поведение?

Вот скриншот с примером:

http://imgur.com/O8qvP

Спасибо, Бода Цидо.

Ответы [ 4 ]

3 голосов
/ 30 января 2010

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

Чтобы высота поплавков влияла на высоту контейнера, после них должен быть элемент, который очищает их. Однако то, что вы видите здесь, на самом деле является частью стандарта CSS, который вы можете использовать для очистки плавающих элементов без дополнительной несемантической разметки. Единственная проблема заключается в том, что это поведение может незначительно отличаться в старых браузерах и их реализациях CSS. Этот эффект присутствует как при переполнении auto, так и при переполнении, скрытом, но не при переполнении видимым. В IE <6 необходимо иметь ширину, установленную для содержащего элемента, чтобы он работал. </p>

1 голос
/ 30 января 2010

Hi, Mom не получает никакого фона, потому что фон исходит от a div, который является высотой 0 (или около 0). Внутренние элементы div на самом деле выходят за его границы (что по умолчанию и делает float).

При работе с плавающими объектами следует помнить, что им не присуща высота (когда речь идет о макете и определении высоты родителя). Встроенный контент просто обтекает их. Так что без overflow: hidden родительский div не имеет высоты. Отсутствие высоты означает отсутствие фона. Поплавки по-прежнему отображаются, но они выходят за пределы родительского div, т.е. содержимое в поплавках вне родительского div.

0 голосов
/ 30 января 2010

Согласно спецификации базовой модели CSS:

поля плавающей коробки не свернуть с любой другой наценкой. Поля поля с «переполнением» другого чем "видимый", не разрушается с его детские поля.

Предоставляя ему свойство «overflow» в явном виде, вы позволяете дочерним элементам вписываться в эту модель, таким образом, b div больше не имеет границ, привязанных к его дочерним элементам. Если вы применяете visible или наследовать (родительский элемент b которого видим по умолчанию), возвращаются границы, а дочерние элементы div определяют поля.

http://www.w3.org/TR/css3-box/ (RE: Пример X)

0 голосов
/ 30 января 2010

Плавающие элементы не занимают вертикального пространства для очистки, есть несколько способов исправить это, например: 

<div class="a">
  <div class="floated-left">Hi,</div>
  <div class="floated-left">Mom!</div>
  <br style="clear: left;" />
</div>

Очистит после, и сделает внешний div вертикальной высотой. Установите border: solid 1px red; на .a, чтобы увидеть это в действии.

Альтернативное решение только для CSS: 

.a:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...