CSS 浮动布局笔记

定义

　　w3cschool教程上有关CSS 浮动的定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

　　从定义可以知道，float有以下特点：

  1. 设置float样式的元素不再占用文档流的位置，后续的元素能够占用空出的位置；
  2. 具有float样式的元素按照设定的漂流方向（左或者右）漂流，直到外边缘碰到父容器边框或者另一个浮动框的边框；

样式效果

　　float最常用在div块状元素，实现某一区域的布局。下面都以div举例说明float的样式效果（本文的代码都是在Tomcat7+Firefox 29.0.1测试所得）。

　　不加float时的布局效果：

 <html>  
 <head>  
    <title>float实例</title>
    <style text="text/css">
        *{
        margin:0px;
        padding:0px;
        }
        
        #all{
        margin:0px auto;
        width:600px;
        height:900px;
        background-color:#888888;
        font-size:20px;
        }
        
        #a,#b,#c{
        width:100px;
        height:50px;
        text-align:center;
        background-color:#00f000;
        border:1px solid black;
        }
        
        #a{
        
        }
        
        #b{
        width:150px;
        }
        
        #c{
        width:200px;
        }
    </style>
 </head>     
 <body>  
    <div id="all">
        <div id="a">第一个div</div>
        <div id="b">第二个div</div>
        <div id="c">第三个div</div>
    </div>
 </body>  
</html>

　　效果如下：

 

今天先写到这里，改天再补上

 

posted @ 2014-06-05 22:13  麦香小瑜儿  阅读(247)  评论(0)  编辑  收藏  举报