浮动（4）

1.浮动
folat:left/right/none
注意：a:浮动元素会把当前的块级元素变成内联元素
b:不在标准文档流中（不会按普通元素排版）

 1 <html>
 2     <head></head>
 3     <title></title>
 4     <style type="text/css">
 5         div{margin:10px;padding:5px;}
 6         #father{border:1px #000 solid;overflow:hidden;}
 7         /*.c1{border:1px #F00 dashed;
 8                 float:left;    
 9         }
10         .c2{border:1px #00F dashed;
11                 float:left;    
12         }
13         .c3{border:1px #060 dashed;
14                 float:left;    
15         }*/
16         .c1{border:1px #F00 dashed;
17                 float:left;    
18         }
19         .c2{border:1px #00F dashed;
20                 float:right;    
21         }
22         .c3{border:1px #060 dashed;
23                 float:left;    
24         }
25         .c4{
26              border:1px #666 dashed;
27              font-size:12px; 
28              line-height:20px;
29              clear:both;
30              float:left;
31             }
32             .clear{
33                         clear:both;
34                         margin:0px;
35                         padding:0px;    
36             }
37     </style>
38     <body>
39         <div id="father">
40             <div class="c1"><img src="4.jpg" slt="日用品"/></div>
41             <div class="c2"><img src="l.gif" slt="图书"/></div>
42             <div class="c3"><img src="o.gif" slt="鞋子"/></div>
43             <div class="c4">浮动的盒子......</div>
44             <div class="clear"></div>
45         </div>
46     </body>
47 </html>

代码示例

2.清除浮动(clear)
both:清除左右浮动
left:清除左浮动
right:清除右浮动

3.溢出处理（overflow）
none:默认
hidden:隐藏
scroll:滚动
auto:自动（滚动效果）
注意：可以通过overflow:hidden设置浮动元素的文元素的高度，使它包裹整个浮动元素

 1 <html>
 2     <head></head>
 3     <style type="text/css">
 4         body{
 5                 font-size:12px;
 6                 line-height:22px;    
 7         }
 8         #c{
 9             200px;
10             height:150px;
11             border:1px #000 solid;    
12             overflow:scroll;
13         }
14     </style>
15     <body>
16         <div id="c"><img src="4.jpg" alt="酒"/>
17             <p>在CSS中使用overflow属性......xxxxxxxxxxxxxx</p>
18         </div>
19     </body>
20 </html>

代码示例