对比三种清除浮动的方式

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 3 <head>
 4   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
 5   <title>v_v</title>
 6   <style type="text/css">
 7   <!--
 8     p {background:silver; }
 9     ul {margin:0; padding:0; }
10     li {list-style:none; border-right:1px solid white; padding:0.5em 1em; }
11     li.left {float:left; }
12     li.right {float:right; }
13 
14 /*~~法一：给外部盒子ul 也浮动，这导致需要为下部的测试段落清除浮动；
15     Fire中的表现为：ul的宽度会自适应li的宽度，然后p的外边距会覆盖ul，p将会上移至内容区接触ul;~~*/
16     ul.wrapper {float:left; background:orange; }
17     p.testof_wrap {clear:both; }
18 
19 /*~~法二：在ul内额外添加一个块级空元素，对该元素清除浮动；~~~~~~~~Fail in IE6,7~~~~~~~~~~~~~~
20     Fire中的表现为：ul的宽度会自适应宽口的宽度，然后p的外边距不再会覆盖ul，p不会上移~~*/
21     ul.box {background:purple; }
22     ul.box div.div_in_box {clear:both; }
23 
24 /*~~法三：对ul使用overflow:hidden/auto;~~~~~~~~~~~~~~~~~~~Fail in IE6~~~~~~~~~~~~~~~~~~~~~~~~
25     Fire中的表现与法二的相同；~~*/
26     ul.bin {overflow:hidden; background:lightgreen; }/*overflow:auto也行*/
27   -->
28 </style>
29 </head>
30 
31 <body>
32 
33 <ul class="wrapper">
34     <li class="left">list_left</li>
35     <li class="right">list_right</li>
36 </ul>
37 <p class="testof_wrap">para_wrap</p>
38 
39 <ul class="box">
40     <li class="left">list_left</li>
41     <li class="right">list_right</li>
42   <div class="div_in_box"></div>
43 </ul>
44 <p class="testof_box">para_box</p>
45 
46 <ul class="bin">
47     <li class="left">list_left</li>
48     <li class="right">list_right</li>
49 </ul>
50 <p class="testof_bin">para_bin</p>
51 
52 </body>
53 </html>

对比浮动与定位

 

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 3 <head>
 4   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
 5   <title>v_v</title>
 6   <style type="text/css">
 7     a.relative {width:100px; height:50px; background:pink; border:1px solid lightgreen; position:relative; }
 8     a.absolute {width:100px; height:50px; background:pink; border:1px solid lightgreen; position:absolute; }
 9     a.float {width:100px; height:50px; background:pink; border:1px solid lightgreen; float:left; }
10 /*~~
11     从以上可以对比出：a.relative是唯一的未脱离文档流的链接，所以它外部的p 仍然占据了空间，而其它两个p 则没有了；
12     而也许正是因为这一点：a.relative仍然像普通的inline元素一样，无法应用宽高属性；而其它两个则因为脱离了文档流，所以能够应用了；
13     ~~*/
14 </style>
15 </head>
16 
17 <body>
18 <p><a href="#" class="relative">click me</a></p>
19 <h3>aim to division them</h3>
20 <p><a href="#" class="absolute">click me</a></p>
21 <h3>aim to division them</h3>
22 <p><a href="#" class="float">click me</a></p>
23 </body>
24 </html>