В книге было написано, что если в элементе-контейнере находятся только плавающие элементы, то некоторые браузеры будут воспринимать их так, будто они имеют высоту в 0 пикселов. Для решения этой проблемы элементу контейнеру нужно добавить свойство overflow со значением auto.
Но далее приведён пример из книги, в котором элементу с идентификатором content применено свойство overflow со значением, хотя в этом элементе-контейнере лишь несколько элементов являются плавающими (div'ы с идентификаторами column1, column2, column3). И без overflow: auto действительно в этом примере страница будет отображаться некорректно.
Чтобы понять, что конкретно не так работает, запустите мой код. А затем раскомментируйте overflow: auto и запустите ещё раз и вы увидите как это должно работать.
Мой вопрос заключается в следующем: почему в этом примере нужен overflow: auto?
body {
width: 960px;
margin: 0 auto;
padding: 0;
}
h1 {
text-align: center;
}
#content {
/*overflow: auto;*/
}
#nav,
#characteristic,
#footer {
background-color: #efefef;
text-align: center;
margin: 10px;
padding: 10px;
}
ul {
text-align: center;
}
li {
display: inline;
padding: 5px;
}
a {
color: #000;
}
#column1,
#column2,
#column3 {
text-align: center;
width: 300px;
float: left;
margin: 10px;
background-color: efefef;
}
#characteristic,
.article {
background-color: #efefef;
}
<body>
<div id="header">
<h1>Логотип</h1>
</div>
<div id="nav">
<ul>
<li>Домой</li>
<li>Товары</li>
<li>Услуги</li>
<li>О нас</li>
<li>Контакты</li>
</ul>
</div>
<div id="content">
<div id="characteristic">
<p>Характеристики</p>
</div>
<div id="column1" class="article">
<p>Колонка1</p>
</div>
<div id="column2" class="article">
<p>Колонка2</p>
</div>
<div id="column3" class="article">
<p>Колонка3</p>
</div>
</div>
<div id="footer">
<p>© Собственность 2019</p>
</div>
</body>
Схлопывание будет, так как у дочернего элемента есть margin-top
и только благодаря overflow: auto
на родительском элементе не происходит схлопавыние, так же к таким свойствам можно отнести float
, position: absolute
, display: inline-block
и др.
Подробней можете почитать здесь.
В примере видно, что между первыми двумя блоками происходит схлопывание и так же происходит схлопывание дочернего и родительского элемента, поэтому размер margin
между ними равен margin-top
дочернего элемента.
Во втором мы используем oveflow: auto
на род. элементе, что предотвращает схлопывание между родительским(container
) и дочерним элементом(block
). Но, остается схлопывание между основными блоками(container
).
.container {
min-height: 100px;
margin-bottom: 5px;
background-color: coral;
}
.container+.container {
margin-top: 30px;
}
.block {
margin-top: 100px;
width: 40px;
height: 40px;
background-color: blue;
}
.overflow {
overflow: auto;
}
<div class="row">
<div class="container">
</div>
<div class="container">
<div class="block"></div>
</div>
</div>
<div class="row">
<div class="container">
</div>
<div class="container overflow">
<div class="block"></div>
</div>
</div>
UPD. Ваши float
элементы выпадают из родительского блока(потока) из за этого высота content
блока равна блоку без float
, если бы его не было высота родителя была бы равна 0
. Поэтому происходит накладывание блоков с float
на footer
, так как высота блока content
меньше, чем контент этого блока.
Что бы избежать этого с float
в основном используют clearfix
для отмены "обтекания". Так же обнулить float
можно с помощью display: inline-block
, oveflow: hidden
(как в вашем примере) и другими свойствами.
.clearfix::after {
display: table;
clear: both;
content: ""
}
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Подскажите, пожалуйста, как написать меню в col-7 offset-3 из 7 блоков на bootstrap, чтобы ему потом можно было прописать :hoverСвою попытку прикрепил ниже,...
Делаю программу которая для начала будет выводить имя домена в котором находится комп, как я понял нужно через
Есть кнопка которая изменяет view, но второй view тоже имеет кнопку которая изменяет view и получается клик на первую кнопку автоматически работает...