Почему ломается вёрстка в данном случае?

112
09 декабря 2019, 17:50

Разбираюсь в примере адаптивной вёрстки с w3schools. И не могу понять, почему, когда я убираю вроде необязательный кусок кода, ломается вся вёрстка.

Удаляю я overflow: hidden; на 29 строке. Думал, что не обязательный, потому что вроде как никакого переполнения за пределы родительского div не было.. Да и даже если бы было, боковые блоки уж точно не должны были так крупно сдвинуться вниз страницы.. Странное достаточно поведение, в общем.

Привожу код:

    * { 
      box-sizing: border-box; 
    } 
     
    body { 
      font-family: Arial; 
      padding: 10px; 
      background: #f1f1f1; 
    } 
     
    /* Header/Blog Title */ 
    .header { 
      padding: 30px; 
      text-align: center; 
      background: white; 
    } 
     
    .header h1 { 
      font-size: 50px; 
    } 
     
    /* Style the top navigation bar */ 
    .topnav { 
      /* WHAT??? */ 
      overflow: hidden; 
      background-color: #333; 
    } 
     
    /* Style the topnav links */ 
    .topnav a { 
      float: left; 
      display: block; 
      color: #f2f2f2; 
      text-align: center; 
      padding: 14px 16px; 
      text-decoration: none; 
    } 
     
    /* Change color on hover */ 
    .topnav a:hover { 
      background-color: #ddd; 
      color: black; 
    } 
     
    /* Create two unequal columns that floats next to each other */ 
    /* Left column */ 
    .leftcolumn {    
      float: left; 
      width: 75%; 
    } 
     
    /* Right column */ 
    .rightcolumn { 
      float: left; 
      width: 25%; 
      background-color: #f1f1f1; 
      /* WHAT??? */ 
      padding-left: 20px; 
    } 
     
    /* Fake image */ 
    .fakeimg { 
      background-color: #aaa; 
      width: 100%; 
      padding: 20px; 
    } 
     
    /* Add a card effect for articles */ 
    .card { 
      background-color: white; 
      padding: 20px; 
      margin-top: 20px; 
    } 
     
    /* Clear floats after the columns */ 
    .row:after { 
      content: ""; 
      display: table; 
      clear: both; 
    } 
     
    /* Footer */ 
    .footer { 
      padding: 20px; 
      text-align: center; 
      background: #ddd; 
      margin-top: 20px; 
    } 
     
    /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ 
    @media screen and (max-width: 800px) { 
      .leftcolumn, .rightcolumn {    
        width: 100%; 
        padding: 0; 
      } 
    } 
     
    /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ 
    @media screen and (max-width: 400px) { 
      .topnav a { 
        float: none; 
        width: 100%; 
      } 
    }
    <!DOCTYPE html> 
    <html> 
    <head> 
    </head> 
    <body> 
     
    <div class="header"> 
      <h1>My Website</h1> 
      <p>Resize the browser window to see the effect.</p> 
    </div> 
     
    <div class="topnav"> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
      <a href="#">Link</a> 
      <a href="#" style="float:right">Link</a> 
    </div> 
     
    <div class="row"> 
      <div class="leftcolumn"> 
        <div class="card"> 
          <h2>TITLE HEADING</h2> 
          <h5>Title description, Dec 7, 2017</h5> 
          <div class="fakeimg" style="height:200px;">Image</div> 
          <p>Some text..</p> 
          <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> 
        </div> 
        <div class="card"> 
          <h2>TITLE HEADING</h2> 
          <h5>Title description, Sep 2, 2017</h5> 
          <div class="fakeimg" style="height:200px;">Image</div> 
          <p>Some text..</p> 
          <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> 
        </div> 
      </div> 
      <div class="rightcolumn"> 
        <div class="card"> 
          <h2>About Me</h2> 
          <div class="fakeimg" style="height:100px;">Image</div> 
          <p>Some text about me in culpa qui officia deserunt mollit anim..</p> 
        </div> 
        <div class="card"> 
          <h3>Popular Post</h3> 
          <div class="fakeimg"><p>Image</p></div> 
          <div class="fakeimg"><p>Image</p></div> 
          <div class="fakeimg"><p>Image</p></div> 
        </div> 
        <div class="card"> 
          <h3>Follow Me</h3> 
          <p>Some text..</p> 
        </div> 
      </div> 
    </div> 
     
    <div class="footer"> 
      <h2>Footer</h2> 
    </div> 
     
    </body> 
    </html>

Answer 1

Если вопрос сугубо образовательный, то вам стоит почитать вот эту статью.

Если коротко, то overflow:hidden выполняет роль очистки последствий свойства float внутри элемента к которому применён. Когда вы его отключаете, родитель получает нулевую высоту и меню как бы исчезает.

Если вопрос в исправлении ситуации и замены overflow иным значением, то там вариантов масса. Использовать flexbox, задать родителю display: table с шириной 100%, заменить float у ссылок на display:inline-block (не забывайте учитывать боковые отступы при использовании данного свойства), использовать псевдоэлемент :after со стилем clear="all" и т.д..

READ ALSO
Шрифты. Поддержка немецкого языка
HTML

Шрифты. Поддержка немецкого языка

Как проверить, поддерживает ли шрифт немецкий язык? Допустим в google fonts, нужно ли как-то дополнительно настраивать, чтобы шрифт поддерживал...

 110
Использовать проверку полей в форме без отправки данных и выводом на печать
jQuery

Использовать проверку полей в форме без отправки данных и выводом на печать

Нужна проверка input без отправки формы на сервер с дальнейшим выполнением действийКороче говоря, хотел пойти простым путем)) и использовать...

 115
Узнать находятся ли элементы на одном листе при печати
jQuery

Узнать находятся ли элементы на одном листе при печати

с помощью wkhtmltopdf я формирую pdf файл, который содержит таблицу, а после блок со служебной инфойМне необходимо, что если несколько листов в документе,...

 126
Из потока читаются не все данные
c#

Из потока читаются не все данные

Вопрос следующийКлиент пишет в поток строку байт

 121