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>