1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>清除浮动</title> 5 <meta charset="utf-8"> 6 <style> 7 body { margin:0; padding:0; font:normal 12px/1.5em "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif;} 8 9 /*.cf { *zoom: 1;} 10 .cf:after{ content: " "; clear: both; display: table;}*/ 11 .box { position: absolute; border: 10px solid #333 } 12 .redBlock { width:400px; height: 400px; float: left; background-color: red} 13 .blueBlock { width:400px; height: 400px; float: left; background-color: blue} 14 .greenBlock { width:1000px; height: 200px; background-color: green} 15 16 /* 17 清除浮动（准确的说是清除浮动影响）的一些方法： 18 19 1、给浮动的父级元素设置高度；// 这个高度值是可以包裹浮动元素的高度； 20 2、给父级元素添加overflow：hidden属性； 21 3、使用clear：both ，在浮动元素的尾部添加一个div，然后给其设置clear：both，不推荐 22 4、使用after伪类清除浮动；最佳实践代码： 23 .cf { *zoom: 1;} 24 .cf:before， 25 .cf:after{ content: " "; clear: both; display: table;} 26 27 其他关于浮动的问题： 28 5、浮动产生的影响会使下一个元素产生位置上的偏移，但是其包裹的内容还是会展现出来， 29 所以理解为：浮动并不是脱离文档流，浮动元素同时处于流内和流外，不同于定位的那种； 30 也就是说，背景会滑动到浮动元素之下，而内容不会；（见例子，浮动的影响） 31 32 // 5.25号更新理解： 其实这里的内容会展现出来的原因是因为，浮动的本质是让字符环绕， 33 （这里的字符包括 还有空格符） 34 在设计之初的时候的时候并不是用于布局。 35 36 6、父级添加了position：absolute属性，可以包裹住浮动元素，但是却不能消除浮动元素产生的影响，见本例；但是这里因为设置了absolute值，脱离了文档流，所以绿色盒子里面的内容就被遮住了，原来只有浮动是遮不住的； 37 38 */ 39 </style> 40 </head> 41 42 <body> 43 <div class="box"> 44 <div class="redBlock">博客的左侧</div> 45 <!-- <div class="clear"></div> --> 46 <div class="blueBlock">博客的右侧</div> 47 </div> 48 <div class="greenBlock">博客的版权信息<div>内容内容容内容容内容容内容容内容</div></div> 49 50 51 </body> 52 </html>