浮动与定位 - 爱码网

　　浮动与定位在网页设计中应用得很广泛，是两种主要布局方式的实现方法。

　　我们知道，网页上一般来说，块标签是自上而下的一块块堆叠，行内标签则在一行内从左到右依次并排，如果所有网页的都这样机械的排列着，也太单调了，所以有没有一个东西让标签内容脱离这种文档流呢，首先就可以考虑float。

　　float，使某元素浮动起来，可以把元素移到，比如浏览器边沿的左边或右边，看上去它们就像粘在边沿上一样，它下边的文本则会充斥在它的一边或者下面，如下例

<!DOCTYPE html>
<html>
    <head>
        <title>float test</title>
        <style type="text/css">
        /*reset*/
        body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img{margin:0;padding:0;}
        .wrap{
            width:300px;
            margin:0 auto;
            border:2px solid #30c13a;
        }
        .wrap .fl{
            width:100px;
            float:left;
            background-color:#8cceff;
        }
        </style>
    </head>
    <body>
        <div class="wrap">
            <p class="fl">
                The Macintosh Classic is a personal
            </p>
            <p>
                It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE. 
            </p>
        </div>
    </body>
</html>

View Code