Edit Question - KnowledgeHub

Title Body

Having a discussion with a co-worker on what is best practice with CSS clear / overflow. Please shut one of us up and explain why one is better than the other. JOEL'S CODE (using overflow): <style> .container { overflow: hidden; } .one, .two { float: left; width: 50px; height: 50px; background-color: red; } </style> <div class="container"> <div class="one"></div> <div class="two"></div> </div> <div class="container"> <div class="one"></div> <div class="two"></div> </div> <div class="container"> <div class="one"></div> <div class="two"></div> </div> <div class="container"> <div class="one"></div> <div class="two"></div> </div> CHRIS' CODE (using clear): <style> .clear { clear: both; } .one, .two { float: left; width: 50px; height: 50px; background-color: red; } </style> <div class="container"> <div class="one"></div> <div class="two"></div> <div class="clear"></div> </div> <div class="container"> <div class="one"></div> <div class="two"></div> <div class="clear"></div> </div> <div class="container"> <div class="one"></div> <div class="two"></div> <div class="clear"></div> </div> <div class="container"> <div class="one"></div> <div class="two"></div> <div class="clear"></div> </div> Both make this image: Who is right? :)

Tags (comma-separated) Cancel