I use the 960gs grid 960gs . Question: Why does a div with the article class fly out of the stream if the clear property is not applied to it? It also adds to the strangeness that the block located in the HTML code above it also has the class grid_... and push_... BUT! For some reason, it is displayed normally and without using the clear property !!! Why is that?

 /*Мой CSS*/ body { padding: 0; margin: 0; background-color: #000; color: #fff; } #header { background-color: rgb(63, 65, 67); width: 100%; height: 100px; } #header li { display: inline; margin-right: 3px; font-style: italic; } #header a { text-decoration: none; color: #fff; } .nav { float: right; } div.article { text-align: left; clear: left; } /*960GS*/ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display: inline; float: left; margin-left: 10px; margin-right: 10px; } .push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 { position: relative; } .container_12 .grid_1 { width: 60px; } .container_12 .grid_2 { width: 140px; } .container_12 .grid_3 { width: 220px; } .container_12 .grid_4 { width: 300px; } .container_12 .grid_5 { width: 380px; } .container_12 .grid_6 { width: 460px; } .container_12 .grid_7 { width: 540px; } .container_12 .grid_8 { width: 620px; } .container_12 .grid_9 { width: 700px; } .container_12 .grid_10 { width: 780px; } .container_12 .grid_11 { width: 860px; } .container_12 .grid_12 { width: 940px; } .container_12 .push_1 { left: 80px; } .container_12 .push_2 { left: 160px; } .container_12 .push_3 { left: 240px; } .container_12 .push_4 { left: 320px; } .container_12 .push_5 { left: 400px; } .container_12 .push_6 { left: 480px; } .container_12 .push_7 { left: 560px; } .container_12 .push_8 { left: 640px; } .container_12 .push_9 { left: 720px; } .container_12 .push_10 { left: 800px; } .container_12 .push_11 { left: 880px; } 
 <div class="container_12"> <div id="header"> <div class="grid_5"> ЛОГОТИП </div> <div class="grid_7"> <div class="nav"> <ul> <li><a href="#">Главная /</a></li> <li><a href="#">Новости /</a></li> <li><a href="#">Архивы</a></li> <li><a href="#">О нас /</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </div> </div> <div id="wrapper"> <div class="grid_6 push_6"> <h1 style="color:#b5c1ad">Что такое VELOHELD?</h1> </div> <div class="grid_3 push_9 article"> <h4 style="color:#b5c1ad">21 февраля 2019</h4> </div> </div> </div>

  • Add a working example that you can run - E_K
  • @E_K why can not run this example? He is a worker - JustLearn
  • I want to run it here, not copy your code, search and download the grid. - E_K
  • @E_K added now. You can run - JustLearn
  • Why do you spend so many resources on the float , if in 99% of cases it is not used? - E_K

2 answers 2

If you want the div to be from a new line, then use the grid size the same as that of the container, in this case container_12 means for the div and vturi put grid_12 . Or between the divs insert empty with the class clear ( <div class="clear"></div> ) In the code showed two examples, both give the same result:

 body { padding: 0; margin: 0; background-color: #000; color: #fff; } #header { background-color: rgb(63, 65, 67); width: 100%; height: 100px; } #header li { display: inline; margin-right: 3px; font-style: italic; } #header a { text-decoration: none; color: #fff; } .nav { float: right; } div.article { text-align: left; /*clear: left;*/ } 
 <html> <head> <link href="styles/КРУТИ ПЕДАЛИ.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/960gs/0/960.min.css" rel="stylesheet"> </head> <body> <div class="container_12"> <div id="header"> <div class="grid_5"> ЛОГОТИП </div> <div class="grid_7"> <div class="nav"> <ul> <li><a href="#">Главная /</a></li> <li><a href="#">Новости /</a></li> <li><a href="#">Архивы</a></li> <li><a href="#">О нас /</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </div> </div> <div id="wrapper"> <!--Вариант 1 --> <div class="grid_6 push_6"> <h1 style="color:#b5c1ad">Что такое VELOHELD?</h1> </div> <div class="clear"></div> <div class="grid_3 push_9 article"> <h4 style="color:#b5c1ad">21 февраля 2019</h4> </div> </div> <div id="wrapper"> <!--Вариант 2 --> <div class="grid_12 push_6"> <h1 style="color:#b5c1ad">Что такое VELOHELD?</h1> </div> <div class="grid_12 push_9 article"> <h4 style="color:#b5c1ad">21 февраля 2019</h4> </div> </div> </div> </body> </html>

  • The 2nd option does not work. And I did not ask that. My question is: why does a div block with the article class fly out of the stream if the clear property is not applied to it? It also adds to the strangeness that the block located in the HTML code above it also has the class grid _... and push _... BUT! For some reason, it is displayed normally and without using the clear property !!! Why is that? - JustLearn

Without clear the .article block .article positioned behind the grid_6 push_6 , as should float elements, and not fall out of the stream. But, you shift these blocks relative to their actual location using the push class, so they do not look like the blocks above.