Когда должны быть очищены плавающие элементы HTML? - PullRequest
1 голос
/ 30 января 2010

Может ли кто-нибудь объяснить, когда следует очищать всплывающие элементы?

Я иногда замечал, что когда я что-то делаю в HTML, и я их не очищаю, все равно все выглядит хорошо!

Также можно использовать overflow:hidden в качестве замены для очистки?

Посмотрите на этот пример:

<html>
<head>
  <style>
    .a { 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 does have overflow:hidden:</p>
  <div class="a">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Mom!</div>
  </div>

  <p>i didn't clear anything</p>
</body>
</html>

Здесь я не очистил плавающие div, но установил overflow:hidden для класса .a, а <p> ниже появился в нормальном потоке элементов.

Однако, если я удалил overflow:hidden из класса .a, <p> сместится.

Пожалуйста, объясните!

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

Ответы [ 4 ]

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

Для незаменяемых элементов уровня блока, когда overflow не установлен на «видимый», а height не «автоматический», высота элемента зависит от его потомков ( CSS 2.1 § 10.6.6 ). Таким образом, когда вы устанавливаете overflow: hidden на .a, он растягивается, чтобы содержать всплывающие потомки. <p> ниже .a, поэтому он находится ниже числа с плавающей запятой.

Без overflow: hidden, .a не содержит плавающих детей; его расчетная высота равна 0. <p> все еще ниже .a, но не плавает. Поплавки выдвигают встроенное содержимое <p>, как обычно делают поплавки.

Попробуйте поставить границы вокруг .a и абзацы, чтобы более четко увидеть разницу.

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

overflow: hidden следует использовать в качестве замены для очистки div, когда это возможно, что происходит большую часть времени.

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

ЕСЛИ вам нужно разместить элементы вокруг шинного блока как единое целое, а содержащийся элемент должен расширяться вертикально до высоты, которая выше В противном случае текстовые / встроенные элементы не всплывающих соседних элементов будут обтекать поплавок. Если этот контент окажется выше вашего поплавка, тогда все будет в порядке ... контейнер расширится. Если же всплывающий элемент выше, вам нужно очистить его, если вы хотите, чтобы контейнер был таким же высоким, как поплавок.

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

Точно так же, как я отвечал в вашем другом посте Когда должно быть переполнение: скрыто, будет использоваться для

это потому, что дочерние элементы элемента div выбрасывают границы из границ при переполнении при это что-то кроме видимого. Когда переполнение видно, технически останавливается на границе div для «Мама!». Когда он отличается от видимого (переполнение, прокрутка, авто), граница продолжается до тех пор, пока не достигнет границы своего родителя (в данном случае правого края браузера). Новый блочный элемент может не начинаться до тех пор, пока у него не будет места для ввода. Действует, когда переполнение становится видимым, он может начинаться непосредственно после границы поля последнего перемещенного элемента div. Когда это другой, он должен ждать полного перерыва в div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...