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