-1

В книге приведён данный пример. Для элемента с идентификатором content указано свойство overflow со значением auto. В интернете прочёл, что это свойство управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. А в этом примере по сути всё помещается. Но если убрать свойство overflow: auto то почему-то блоки с идентификаторами column1, column2, column3 и footer слепятся в один. И хочу уточнить свой вопрос: что конкретно делает overflow: auto в этом примере?
P.S. так же для #content в книге было указано свойство height со значением 100%. Но с ним страница отображается некорректно.

body {
        width: 960px;
        margin: 0 auto;
        padding: 0;
       }
       h1 {
        text-align: center;
       }
       #content {
        overflow: auto;
        /*height: 100%;*/
       }
       #nav, #characteristic, #footer {
        background-color: #efefef;
        text-align: center;
        margin: 10px;
        padding: 10px;
       }
       ul {
        text-align: center;
       }
       li {
        display: inline;
        margin: 3px;
       }
       a {
        color: #000;
       }
       #column1, #column2, #column3 {
        width: 300px;
        float: left;
        margin: 10px;
        background-color: efefef;
       }
<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"><p>Колонка1</p></div>
   <div id="column2"><p>Колонка2</p></div>
   <div id="column3"><p>Колонка3</p></div>
</div>
<div id="footer">
   <p>&copy; Собственность 2019</p>
</div>

1
  • Я отредактировал (дополнил) вопрос
    – JustLearn
    3 фев 2019 в 17:32

1 ответ 1

1

Потому что когда используются элементы с левым или правым выравниванием они выходят так сказать из потока. И происходит схлапывание границ и если не обнулять выравнивание избежать схлапывания можно с помощью overflow: auto;

8
  • Я уточнил свой вопрос. Он был не совсем точным. Возможно благодаря этому Вы сможете дать ещё какую-то информацию
    – JustLearn
    3 фев 2019 в 17:34
  • Вы имеете в виду выходят из схемы нормального потока?
    – JustLearn
    3 фев 2019 в 17:36
  • Что значит обнулять выравнивание? Можете уточнить?
    – JustLearn
    3 фев 2019 в 17:37
  • 1
    Я обычно это делаю следующим образом <div id="column1"><p>Колонка1</p></div> <div id="column2"><p>Колонка2</p></div> <div id="column3"><p>Колонка3</p></div> после этих блоков я бы добавил еще див <div class="clear"></div> а в css записал бы так .clear{clear:both} 3 фев 2019 в 17:38
  • ааа.. Да, точно у меня в книге про это было написано. Я понял. Если на странице находятся только плавающие элементы, то браузеры будут воспринимать их как будто они имеют высоту в 0 пикселов. И чтобы избежать этой проблемы можно поставить под ними блок со свойством clear или применить свойство overflow со значением auto и width со значением 100% (правда в моём примере почему-то работает и без добавления к width 100%). Спасибо)
    – JustLearn
    3 фев 2019 в 18:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.