案例一：
1. 首先是01.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="01.css" /> </head> <body> <div class="div1"> <div class="div2 special_div">1div</div> <div class="div2">2div</div> <div class="div2">3div</div> <div class="div2">4div</div> <div class="div2">5div</div> <div class="div2">6div</div> </div> </body> </html>
2. 然后01.css文件：
@charset "utf-8"; /* CSS Document */ .div1 { width:800px; height:800px; border: 1px solid pink; } .div2 { width:150px; height:100px; border:1px solid blue; background-color:pink; margin-top:5px; margin-left:5px; text-align: center; float:left;/*左浮动：指让该元素尽量向左边移动，让出自己右边的空间，给下一个元素*/ } .special_div { height:120px; }
效果图：
总结：
浮动是一个重要的概念，分为左浮动、右浮动和清除浮动。
特别注意：如果一行宽度不够排下所有的div，则会自动换行;当然如果有某个div过大，则会卡住别的div，如上图会后移
案例二：
1.首先是01.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="01.css" /> </head> <body> <div class="div1"> <div id="div3" class="div2">1div</div> <div class="div2">2div</div> <div class="div2">3div</div> </div> </body> </html>
2.然后是01.css文件：
@charset "utf-8"; /* CSS Document */ .div1 { width:800px; height:800px; border: 1px solid pink; } .div2 { width:150px; height:100px; border:1px solid blue; background-color:pink; margin-top:5px; margin-left:5px; text-align: center; } #div3 { float:right;/*右浮动：让该元素尽量向右移动，直到碰到他的父元素的右边界*/ }
效果图：
