<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .ft { width: 100px; height: 100px; background: red; float: left; } /*1、overflow:hidden*/ .box { overflow: hidden; } /*2、 添加空元素 设置clear:both*/ .fill { clear: both; } /*3.使用after伪元素清除浮动*/ .box2:after { /*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .box2 { *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ } /*4、父元素设置高度*/ .box3 { height: 100px; } /*5、父元素设置display:inline-block;*/ .box4 { display: inline-block; } </style> </head> <body> <div class="box"> <div id="box1" class="ft"></div> </div> <div class="gr">overflow:hidden</div> <div class="box1"> <div id="box2" class="ft"></div> <div class="fill"></div> </div> <div class="gr">添加空元素 设置clear:both</div> <div class="box2"> <div id="box3" class="ft"></div> </div> <div class="gr">使用after伪元素清除浮动</div> <div class="box3"> <div id="box4" class="ft"></div> </div> <div class="gr4">父元素设置高度</div> <div class="box4"> <div id="box5" class="ft"></div> </div> <div class="gr">父元素设置display:inline-block;</div> </body> </html>