<!doctype html> <html> <head> <meta charset="utf-8"> <title>高度塌陷问题</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset,img,input{ margin:0; padding:0; } .section{ width:600px; /*height:150px;*/ padding:20px; background:#eee; /*overflow:hidden;*/ margin-top:200px; } .news,.intro,.job{ height:200px; float:left; position:relative; top:-80px; left:0; } .news{ width:300px; background:pink; } .intro{ width:150px; background:#ac0; } .job{ width:150px; background:#900; } .clear{ height:0; overflow:hidden; clear:both; background:blue; } .clearfix::after{ content:"."; height:0; clear:both; overflow:hidden; display:block; visibility:hidden; } </style> </head> <body> <div class="section clearfix"> <div class="news"></div> <div class="intro"></div> <div class="job"></div> <!--<div class="clear"></div>--> </div> </body> </html>