overflow: hidden — это волшебное использование свойства переполнения, которое может помочь нам скрыть переполненные элементы, очистить плавающие элементы и развернуть. Когда у определенного атрибута так много функций, его неизбежно будет трудно понять, но не бойтесь, просто поверьте: после прочтения этой статьи вы определенно сможете освоить использование overflow:hidden.
Следующий код будет использоваться в качестве базового демонстрационного кода.Каждый раз, когда объясняется новая функция, мы должны восстановить код следующим образом:
Стиль CSS:
.container{
background-color: black;
}
.div1{
background-color: aqua;
width: 100px;
height: 100px;
}
.div2{
background-color: red;
width: 100px;
height: 100px;
}html-контент:
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
Эффект запуска программы:
1. Используйтеoverflow：hiddenскрыть переполнение
Когда родитель Div с фиксированной высотой, такой какheight:500px,Мы используемoverflow:hiddenчтобы скрыть переполнение.
При использовании макета div+css будет много вложений div — один или несколько дочерних div вложены в родительский div.По умолчанию высота родительского div равнаauto- Его можно произвольно расширить с помощью quilt div. Однако родительский div также может иметь фиксированную высоту (или ширину), напримерheight:500px, тогда, если высота дочернего div превышает это значение, по умолчанию дочерний div превысит границу родительского div, что является переполнением. Мы можем управлять дочерним div, установив свойство CSS родительского div — overflow. использовать здесьoverflow:hiddenчтобы скрыть переполняющую часть дочернего элемента.
2. Используйтеoverflow：hiddenочистить поплавок
Когда высота родительского элементаheight: autoкогда мы используемoverflow：hiddenочистить поплавок
Когда мы добавляем атрибут в div1 и div2:float: leftПосле этого мы обнаружим, что: цвет фона черный, а родительский элемент div исчез, потому что: плавающий элемент отделен от элемента документа и не занимает места. Элементы, которые не плавают, будут напрямую игнорировать этот элемент: родительский div игнорирует двух своих дочерних элементов, а его высота равна 0 (поскольку мы не установили высоту родительского div), поэтому родительский div не отображается.
Есть два способа сделать родительский div «прощающим» для принятия двух его дочерних элементов:
(1)Во-первых, пусть отец тоже плавает, давайте попробуем добавить свойство CSS в родительский div:float: right, вы обнаружите, что в правой части экрана появляются два цветных блока, а родительского div по-прежнему нет.Однако с помощью инструментов разработчика нетрудно увидеть, что родительский div содержит дочерний div
Это связано с тем, что плавающий div потерял способность «доминировать над строкой», нам нужно вручную установить ширину для родительского div, напримерwidth:500px, то вы можете увидеть:
(2) Второйдобавить для отцаoverflow:hiddenсвойство для очистки поплавка
.container{
background-color:
black;
overflow:hidden;}
Эффект в это время показан на рисунке:
Суммировать:
(1) (2) Один использует стратегию обоих плавающих, а другой использует стратегию очистки поплавка, чтобы родительский div терпимо принимал дочерний div, а дваРазница в том, что плавающий элемент требует дополнительной настройки ширины родительского элемента div, потому что плавающий элемент div теряет эксклюзивную черту линии элемента div, а очистка плавающего элемента родительского элемента по-прежнему является избыточной.
3. Отпустите коллапс
можно использоватьoverflow:hiddenОтпустите коллапс поля, конечно, коллапс не зависит от того, фиксирована ли высота родительского div или нет
Прежде всего, нам нужно знать, что называется коллапсом:
Добавляем атрибут в div1:margin-top:50px, мы представляем, что эффект будет таким:
Но на самом деле это выглядит так (это эффект в инструментах разработчика):
В CSS есть отступ коллапс, то есть обрушение границы или перекрытие границы. Для верхнего и нижнего блоков div поля margin-bottom верхнего div и margin-top нижнего div будут схлопываться, то есть максимальное значение верхнего и нижнего полей будет приниматься за отображаемое значение, поэтому в в этом смысле: дизайнеры CSS и браузеров надеются, что при макетировании, если мы столкнемся с расположением двух расположенных рядом блоков контента, лучше всего установить только одно место выше или ниже поля каждого блока.
Но для случая, когда родительский блок DIV содержит дочерний блок DIV, это будет объяснено в соответствии с другим соглашением CSS, а именно: способ вычисления высоты для элемента (родительского элемента) с дочерними элементами уровня блока, если Элемент не имеет верхней и нижней границ и отступов, тогда его высота равна расстоянию между верхней и нижней границами первого дочернего элемента.
В заключение:
Чтобы решить проблему закрытия верхнего поля в родительско-дочернем DIV, вам нужно установить родительский div:
1. Граница, конечно, можно сделать рамку прозрачной;
2. Добавьте padding в родительский DIV или хотя бы padding-top;
Кроме того, это также может быть решено переполнением
(1) Мы можем добавить к родительскому divoverflow: hiddenрешить эту проблему:
.container {
background-color: black;
overflow: hidden;
}Эффект показан на рисунке:
(2) Думающие читатели обязательно задумаются, может ли float решить эту досадную проблему.Здесь, чтобы исключить влияние overflow: hidden на родительском div неопределенной высоты, мы устанавливаем высоту для родительского div:
.container {
background-color: black;
height: 200px;
}
Мы добавляем атрибут float ко всем дочерним элементам div (например,float:left), очевидно, что пока это плавающий дочерний div, проблема коллапса будет полностью исключена (PS: независимо от того, является ли родительский div плавающим или нет):
можно использоватьoverflow: hiddenЧтобы отменить коллапс, плавающему div вообще не нужно учитывать коллапс.
4. Резюме
overflow: hiddenИспользование переполнения и очистки float в основном предназначено для того, чтобы определить, имеет ли родительский div фиксированную высоту. Он также несет дополнительную ответственность за ликвидацию коллапса.