<html> <head> <meta charset="utf-8"> <title></title> <style> clear:right; </style> </head> <body> <!--浮动元素float--> <img src="./111.jpg" alt="美女2" style="float:right"/> <!-- .clear{clear:left;} 清楚浮动后，则变成块标签 --> <p>11111111<p> <p>11111111<p> <table border="1" cellspacing="0" width="40%" height="100%" align="center"> <tr> <td>测试浮动元素</td> <td>测试</td> </tr> </table> <p>11111111<p> <p>11111111<p> <p>11111111<p> <p>11111111<p> <p>11111111<p> <p>11111111<p> <!--使用<div>布局页面，产生三列的效果--> <img src="./111.jpg" alt="美女2" style="float:right"/> <img src="./111.jpg" alt="美女2" style="float:right"/> <img src="./111.jpg" alt="美女2" style="float:right"/> <!-- 定位元素 将浏览器窗口看做一个坐标系统，以左上角为坐标原点 (0,0)，横坐标为x轴，纵坐标为y轴。 absolute（绝对定位） 通过属性left、right、top和bottom来定位元素。 h1 { position: absolute; top: 20px; left: 60px; } 绝对定位不占据页面空间。 --> <!-- relative（相对定位） 采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的（top,left）。 采用相对定位的元素会获得相应的空间。 即是相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。 例子： <div class="center"> <div class="content"> 美国两位总统候选人7日晚在田纳西州贝尔蒙特大学举行了第二场辩论，金融危机成为双方攻守的主打牌。 </div> </div> .center{ position: absolute; top: 50%; left: 50%; border: solid 1px green; } .content{ position: relative; top: -50px; left: -100px; 200px; height: 100px; border: solid 1px red; 解析： 1. 绿色边框是center元素所在的位置，其左上角处于页面的正中心。 2. 红色边框的是content元素所在的位置，其左上角相对center元素向上移动了50px，向左移动了100px，从而使其位于页面的中心。 --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> </body> </html>
浮动元素例子