浮动相关理解，以及清除浮动的方法总结 

 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    （这里的字符包括&nbsp;还有空格符）
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>

 

posted on 2015-05-25 21:39  张小国  阅读(221)  评论(0)    收藏  举报

导航