<!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>
