浮动模型详解及其应用

一、浮动布局的五个基本特征：

1、任何定义为float的元素都会自动被设置为一个块状元素显示，相当于被定义display：block；声明。这样就可以为浮动元素定义width和height属性，即使是内联显示元素也可以。

　　当我们没有指定浮动元素宽度时，浮动元素会自动收缩到能够包含内容的宽度。而块状元素（或者被定义display：block；）显示时，如果没有定义，它的宽度则会自动显示为100%。

2、浮动模型不会与流动模型发生冲突，当元素定义为浮动布局时，它在垂直方向上应该还处于文档流中，也就是说浮动元素不会脱离正常文档流而任意浮动，它的上边线将会与未被声明为浮动时的位置一样，但是在水平方向上，它的浮动边会尽可能的靠近它的包含元素边缘。

3、与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系。

4、浮动元素后面的块状元素和内联元素都能够以流的形式环绕浮动元素左右。甚至于上面文本流连成一体。

5、当两个或两个以上的相邻元素都被定义为浮动显示时，如果存在足够的空间容纳它们，浮动元素之间可以并列显示，它们的上边线是在同一水平线上。

　　如果没有足够空间那么后面的浮动元素将会下移到能够容纳它的地方这个向下移动的元素有可能产生一个单独的浮动。

二、清除浮动

　　clear可以清除浮动，其属性值有四个：

left：清除左边的浮动对象，如果左边存在浮动对象，则当前元素会在浮动对象底下显示。
right：清除右边的浮动对象，如果右边存在浮动对象，则当前元素会在浮动对象底下显示。
both：清除两边的浮动对象，不管哪边存在浮动对象，则当前元素都会在浮动对象底下显示。
none：默认值。允许两边都可以有浮动对象，当前元素、浮动元素不会换行显示。

三、实战混合布局

1、调整左右栏之间的空隙

　　当我们想控制浮动对象和流动对象之间的水平间距时，可以从浮动对象下手，定义浮动元素的边界或内边距，以实现调控间距的目的，因为浮动元素的边界和内边距不会被流动元素覆盖。如果从流动元素下手，则不会产生任何效果。

这是HTML代码：

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4   <meta charset="UTF-8"> 5   <link rel="stylesheet" href="1.css" type="text/css"> 6   <title></title> 7 </head> 8 <body> 9   <div id="contain">10     <img src='/images/loading.gif' data-original="image/2.png"/>11     <img src='/images/loading.gif' data-original="image/3.png"/>12     <img src='/images/loading.gif' data-original="image/5.png"/>13     <img src='/images/loading.gif' data-original="image/8.png"/>14     <h2>荷塘月色（节选）</h2>15     <p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿⑴，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。<br></p>16     <p> 沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁⑵的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。<br></p>17     <p> 路上只我一个人，背着手踱⑶着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现 在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。<br></p>18     <p>曲曲折折的荷塘上面，弥望⑷的是田田⑸的叶子。叶子出水很高，像亭亭的**的裙。层层的叶子中间，零星地点缀着些白花，有袅娜⑹地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉⑺的流水，遮住了，不能见一些颜色；而叶子却更见风致⑻了。<br></p>19     <p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲⑼上奏着的名曲。<br></p>20     <div id="clear"></div>21   </div>22 </body>23 </html>

View Code

这是css样式：

 1 #contain{ 2   height: 620px; 3   border: double 4px midnightblue; 4   padding: 15px;  /*为页面包含元素增加内边距*/ 5 } 6 img{ 7   float:left;  /*图片向左浮动*/ 8   clear:left;  /*清除向左的浮动，使图片单列显示*/ 9   width:250px;10   height:130px;11   margin: 6px 20px 6px 6px;  /*定义外边距 (上 右 下 左)*/12   border: solid 1px #5d63fa;13 }14 h2{15   text-align: center;  /*文字居中*/16 }17 p{  /*定义段落属性*/18   text-indent: 2em;  /*首行缩进两个字符*/19   font-size: 16px;  /*定义字体大小*/20   line-height: 1.8em;  /*定义行高*/21 }22 #clear{  /*定义清除类，处理非IE浏览器不能自适应包容问题*/23   clear: both;24 }

View Code

实现效果：

2、调整上下栏之间的空隙

　　在上述实例中增加一个导航栏：

在body里面增加：

1 <ul>2     <li><a href="#">首页</a></li>3     <li><a href="#">导航菜单1</a></li>4     <li><a href="#">导航菜单2</a></li>5     <li><a href="#">导航菜单3</a></li>6     <li><a href="#">导航菜单4</a></li>7     <li><a href="#">导航菜单5</a></li>8     <li><a href="#">导航菜单6</a></li>9   </ul>

在css样式里面增加：

 1 /*增加的样式：定义导航栏*/ 2 ul{ 3   list-style-type: none;  /*去掉列表前面的圆点*/ 4   padding-bottom: 20px; 5   /*text-align: center;*/ 6 } 7 li{ 8   display: inline;  /*水平排列列表项*/ 9 }10 a{11   text-decoration: none;  /*去掉下划线*/12   background-color: blue;  /*背景颜色*/13   float:left;  /*将列表项的边框合为一个*/14   width: 100px;15   height: 30px;16   line-height: 30px; /*设置行高使列表项垂直居中*/17   text-align: center; /*使列表项水平居中*/18   color:white;19   border-right: solid 2px greenyellow; /*定义列表项间的边框*/20 }21 a:hover,a:active{22   color:#F03;23 }

View Code

则效果：