HTML+CSS 輕鬆入門(mén)之浮動(dòng)模型
狀元素這麼霸道都是獨(dú)佔(zhàn)一行，如果現(xiàn)在我們想讓兩個(gè)塊狀元素並排顯示，怎麼辦呢？不要著急，設(shè)定元素浮動(dòng)就可以實(shí)現(xiàn)這個(gè)願(yuàn)望。
任何元素在預(yù)設(shè)情況下是不能浮動(dòng)的，但可以用CSS 定義為浮動(dòng)，如div、p、table、img 等元素都可以被定義為浮動(dòng)
下面我們來(lái)寫(xiě)一個(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ú)佔(zhàn)一行，現(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ì)連結(jié)在一起，在同一行展示
接下來(lái)我們給第二個(gè)div 做一個(gè)向左的邊界這樣就可以了
