<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clearFloat</title> </head> <style> *{ margin: 0; padding: 0; } .left{ width: 20%; height: 100px; float: left; background:#343; } .right{ width: 20%; height: 100px; float: right; background: #343; } .box{ overflow: auto;/*属性法解决浮动*/ zoom:1;/*兼容ie6*/ } .box2,.box3{ margin: 30px 0; } .clear{ clear: both; } .box3:after{ display: block; height: 0; content: ""; visibility: hidden; clear: both; } /* 3.使用after伪对象清楚浮动 注意：必须为需要清除浮动的元素设置 height:0; 必须设content:'';属性 值为空即可； */ </style> <body> <div class="box"> <div class="left"></div> <div class="right"></div> </div> <div class="box2"> <div class="left"></div> <div class="right"></div> <div class="clear"></div> <!--添加空标签清除浮动--> </div> <div class="box3"> <div class="left"></div> <div class="right"></div> <!--after属性清除浮动--> </div> </body> </html>