Переполнение CSS: скрыто с поплавками

Ответ 1

Я пытаюсь положить конец путанице:

ul является элементом уровня блока, который является элементом p (они растягиваются до 100% от родительской ширины). Поэтому по умолчанию p будет отображаться ниже ul, если в этих элементах не объявлена ​​ширина или отображение.

Теперь в вашем примере ul содержит только плавающие элементы. Это приводит к тому, что он падает до высоты 0px (он по-прежнему имеет ширину 100%, как вы можете видеть в примере). Прилегающий p появится справа от плавающего li, потому что они рассматриваются как обычные плавающие элементы.

Теперь объявление overflow (любое значение, отличное от visible) устанавливает новый блок форматирования контекста, что делает ul содержит его дочерние элементы. Внезапно ul "снова появляется", не имея размера 0px. p приближается к дну. Вы также можете объявить position:absolute для достижения того же эффекта "очистки" (с побочным эффектом, который теперь ul выводится из потока нормального элемента - p будет перекрываться ul.)

Смотрите пример скрипта

Если вы попали в технический материал, сравните соответствующие параграфы спецификации CSS:

§10.6.3 Незаменяемые элементы уровня блока в нормальном потоке, когда "переполнение" вычисляется до "видимого"
и
§10.6.7 "Авто" высоты для корневого контекста форматирования блоков. (Благодаря BoltClock для выкапывания ссылок).

ul{
    list-style-type:none;
    margin:0; padding:0;
    background-color:#dddddd;
    border:2px solid red;
}
li{
    float:left;
}
a{
    display:block;
    width:60px;
    background-color:#555;
    color:white;
}
p{
    margin:0;
    outline:2px dotted blue;
}
#two{
    clear:both;
    overflow:hidden;
}

No overflow:
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats  </p>
<br>
With overflow: hidden
<ul id="two">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>the ul reappeared - it now contains the child li - the float is cleared</p>

Ответ 2

Настройка overflow: hidden элемента приводит к созданию нового контекста float, поэтому элементы, которые перемещаются внутри элемента с приложением overflow: hidden, очищаются.

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Ответ 3

Вот почему w3schools не является надежным источником для веб-дизайнера/разработчиков. Вы правы, это ужасный пример.

Это не потому, что в этом примере родительский элемент не имеет фиксированного с. Кроме того, это не упорядоченный тег списка, который будет растягиваться на размер его детей независимо.

http://jsfiddle.net/EhphH/

CSS

.parent {
    width: 150px;
    height: 100px;
    padding: 10px;
    background: yellow;
    overflow: hidden;

}
.child {
    float: left;
    width: 75px;
    height: 120px;
    margin: 10px;
    background: blue;

}
.baby {
    width: 200px;
    height: 25px;
    background: green;
}

Разметка

<div class="parent">
    <div class="child">
        <div class="baby">
        </div>
    </div>
    <div class="child">
    </div>
</div>

Ответ 4

Почему бы просто не использовать "inline-block" и удалить свойства "overflow", "float"?

Ответ 5

Цитировать из HTML & CSS труден

Подводя итог, когда у вас есть дополнительный не всплывший элемент HTML на дно контейнера div, используйте прозрачный раствор. В противном случае добавьте переполнение: скрытое объявление для элемента контейнера. Основной Идея обоих вариантов заключается в том, что вам нужен способ сообщить браузеру включить поплавки в высоту их элемента контейнера

Ответ 6

Вместо overflow:hidden; используйте clear:both; для <p>. здесь он используется http://jsfiddle.net/Mvv8w/. В основном overflow:hidden очистит все, что в стороне, как это делает clear:both;.