HTML+CSS 輕松入門之浮動模型
狀元素這么霸道都是獨占一行，如果現(xiàn)在我們想讓兩個塊狀元素并排顯示，怎么辦呢？不要著急，設(shè)置元素浮動就可以實現(xiàn)這一愿望。
任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動
下面我們來寫一個浮動的實例，代碼如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流動模式下的內(nèi)聯(lián)元素</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 獨占一行，現(xiàn)在我們要把他們放在一行顯示，然后倆個div之間又點距離，請看下面代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流動模式下的內(nèi)聯(lián)元素</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; /*調(diào)節(jié)倆個div之間的距離*/
}
</style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>這樣我們想要的效果就完成了，首先我們要給第一個div 做一個向左的浮動，第二個也是，然后倆個就會鏈接在一起，在同一行展示
接下來我們給第二個div 做一個向左的邊界 這樣就可以了
