<!DOCTYPE html> <html> <head> <style type="text/css"> .separator { height: 20px; background-color: green; } #parent { background-color: lime; margin-bottom: 50px; } #float { float: left; width: 100px; height: 100px; background-color: blue; } #clear { clear: left; margin-top: 20px; margin-bottom: 30px; } #clear-sibling { margin-top: 40px; margin-bottom: 10px; } </style> </head> <body> <div class="separator"></div> <div id="parent"> <div id="float"></div> <div id="clear"></div> <div id="clear-sibling"></div> </div> <div class="separator"></div> </body> </html>