对比三种清除浮动的方式
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>
来源：http://www.cnblogs.com/moonfire/archive/2012/01/15/2323072.html