Свойства при переполнении CSS

Question

У меня есть 2 вопроса или, точнее, пояснения, которые мне нужны, связанные со свойством переполнения CSS. Говорят, что

Ящики со значением переполнения, отличным от видимого, будут расширяться по вертикали, чтобы охватить любые всплывающие потомки.

Также в отношении полей сказано, что

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

Не могли бы вы объяснить эти 2 пункта с любым практическим использованием того же самого ... Было бы здорово, если бы вы могли привести любой пример, чтобы продемонстрировать то же самое.

Мои демонстрации по этому вопросу;

http://jsfiddle.net/emeRJ/13/

http://jsfiddle.net/emeRJ/12/

Answer 1

1) если у вас есть элемент с переполнением, отличным от «видимого», высота элемента будет увеличиваться в соответствии с элементами float внутри.

проверьте этот пример: http://jsfiddle.net/emeRJ/3/

, поскольку я не определил height для поля, оно будет расширено плавающими блоками внутри. Только потому, что переполнение не «видимое». Поэтому, если вы установите переполнение на видимое, поле не будет учитывать плавающие элементы, а высота блока будет равна 0 (в примере, если вы измените переполнение на видимое, вы не увидите серый фон)

Таким образом, существуют разные способы использования переполнения, поплавка и высоты (или ширины) вместе. Overflow сообщит браузеру, что делать с содержимым, которое не помещается в поле (если вы определили размеры окна), Float поместит элементы рядом друг с другом в соответствии с размерами родительского элемента. , а высота и ширина будут ограничивать видимую область

[еще более сложный] в примере, когда переполнение становится видимым, вы все равно можете заставить окно расширяться, если добавите более четкий элемент внутри: http://jsfiddle.net/emeRJ/4/

2) во-вторых, вы действительно должны прочитать ссылку , заданную @feeela о сворачивающихся полях ... = P

Надеюсь, это поможет

Answer 2

Расширение с переполнением

Ящики со значением переполнения, отличным от видимого, будут расширяться по вертикали, чтобы охватить все всплывающие потомки

Это свойство полезно при очистке плавающих элементов. Распространенной проблемой является то, что плавающий элемент не содержится в родительском элементе; Использование overflow - это простой способ решить эту проблему.

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

Вот окончательный результат на JSBin

Сжимающиеся поля

Поля никогда не свернутся для поля со значением переполнения, отличным от видимого.

Давайте рассмотрим спецификацию W3C для получения дополнительной информации (и примеров) о сворачивающихся полях:

Некоторые смежные поля объединяются в единое поле. Считается, что эти поля «разрушаются». Поля примыкают, если нет непустого содержимого, отступов или границ или зазоров для их разделения.

Утверждение, которое вы включили в свой вопрос, означает, что это поведение нельзя использовать, если для overflow установлено значение hidden, scroll или auto.