I can not understand why clearfix does not work. In this layout, the footer should be cleared of float, but for some reason it does not work.

header { border: 1px solid black; background-color: #336596; } nav { border: 1px solid black; float: left; width: 15%; background-color: #fd9800; } main { border: 1px solid black; float: left; margin: 0 auto; width: 60%; } aside { border: 1px solid black; float: left; width: 15%; background-color: #983264; } footer { border: 1px solid black; background-color: #669900; } .clearfix::after { content: ""; clear: both; display: table; } 
  <header> <h1>Header</h1> </header> <div class"clearfix"> <nav> <h2>Navigation</h2> </nav> <main> <h2>Main</h2> </main> <aside> <h2>Related links</h2> </aside> </div> <footer> <h1>Footer</h1> </footer>

Should get this layout enter image description here

  • one
    in the sense that's how it should be? codepen.io/topicstarter/pen/NVNgRY - MaximLensky
  • Yes! It seems that the problem was that clearfix had to be displayed in a separate div immediately after aside - Nikita Migushev
  • one
    but right now 2019? and it’s the very thing to use flex or grid and float to apply only to the flow around ... and everything and everything that you conjure there you will automatically ... - MaximLensky
  • one
    codepen.io/topicstarter/pen/BeKZgq this flex look how simple it is - MaximLensky
  • Thank! Everything became clear) - Nikita Migushev

1 answer 1

Didn’t work because you didn’t put = after class="clearfix"