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

113
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: ""
}
READ ALSO
не работает разметка GRID

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

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

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

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

Подскажите, пожалуйста, как написать меню в col-7 offset-3 из 7 блоков на bootstrap, чтобы ему потом можно было прописать :hoverСвою попытку прикрепил ниже,...

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

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

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

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

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

Есть кнопка которая изменяет view, но второй view тоже имеет кнопку которая изменяет view и получается клик на первую кнопку автоматически работает...

123