HTML+CSS 輕鬆入門之浮動模型
狀元素這麼霸道都是獨佔一行，如果現在我們想讓兩個塊狀元素並排顯示，怎麼辦呢？不要著急，設定元素浮動就可以實現這個願望。
任何元素在預設情況下是不能浮動的，但可以用CSS 定義為浮動，如div、p、table、img 等元素都可以被定義為浮動
下面我們來寫一個浮動的實例，程式碼如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
}
#dv2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>以上程式碼是塊狀元素div 獨佔一行，現在我們要把他們放在一行顯示，然後兩個div之間又點距離，請看下面程式碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
float:left;
}
#dv2{
width:100px;
height:100px;
background:red;
float:left;
margin-left:5px; /*调节俩个div之间的距离*/
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>這樣我們想要的效果就完成了，首先我們要給第一個div 做一個向左的浮動，第二個也是，然後兩個就會連結在一起，在同一行展示
接下來我們給第二個div 做一個向左的邊界這樣就可以了
