Почему здесь нужен overflow: auto?

112

21 сентября 2019, 08:40

В книге было написано, что если в элементе-контейнере находятся только плавающие элементы, то некоторые браузеры будут воспринимать их так, будто они имеют высоту в 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>&copy; Собственность 2019</p> 
  </div> 
</body>

Answer 1

Схлопывание будет, так как у дочернего элемента есть 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: ""
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

не работает разметка GRID

Не понимаю почему не работает grid-template-areas

114

HTML

Почему здесь нужен overflow: auto?

не работает разметка GRID

Меню сайта на Bootstrap 4

C# не понимает GetCurrentDomain ()

C# WPF Отменить клик при смене View