相信很多人都有這樣的問題，在頁面佈局中float和position:absolute哪個更好用呢？既然是佈局，就用float好，這個我比較常用。這個浮動是可以清除的，一般不會影響整體佈局。 而position，定位，是不受約束的，這個貌似都談不上佈局了，一般要是做什麼特殊的定位或者浮動層的時候，可以考慮使用。正常頁面佈局，我個人建議用FLOAT
1.float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。div一個典型的塊級元素，會單獨佔據一行。
先看看最基本的塊級元素如何排列的。html代碼，以下樣式都是基於此。
<div class="boxBg">
<div class="box1">
框框1
</div>
<div class="box2">
框框2
</div>
<div class="box3">
框框3
</div>
</div>
css代碼：
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc
}
.box1{
width:100px;
height:50px;
background-color:red
}
.box2{
width:100px;
height:50px;
background-color:blue
}
.box3{
width:100px;
height:50px;
background-color:green
}
執行結果：
由於div是塊級元素，所以框會以縱向形式排列。在實際操作中往往需要將框橫向排列。有兩種方式可以實現。第一種將display:inlin-block;
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc
}
.box1{
width:100px;
height:50px;
background-color:red;
display:inline-block
}
.box2{
width:100px;
height:50px;
background-color:blue;
display:inline-block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}
執行結果：
至於中間的縫隙，追溯到本質原因是元素之間的空白符引起的，所以在父元素設置fone-size的大小，可以調節空白縫隙的大小。
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:34px;
}
將font-size:34px之後，那麼縫隙會變寬。
執行結果：
同理，要去掉縫隙，那麼需要將font-size:0;
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:0
}
執行結果：
如此便實現了想要的佈局，框裏邊的文字也跟着消失了，同樣也證明文字的大小影響縫隙。只需要在子元素裏重新設置就可以了。當然今天的重點並不是這個。同樣的效果float:left;也可以輕鬆實現。
<style>
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
.box1{
width:100px;
height:50px;
background-color:red;
float:left
}
.box2{
width:100px;
height:50px;
background-color:blue;
float:left
}
.box3{
width:100px;
height:50px;
background-color:green;
float:left
}
</style>
執行結果：
元素添加 float之後，此浮動元素會在其碰到父級元素邊框或者另一個浮動元素邊框，緊鄰其後顯示。例如下邊的例子，在浮動元素總寬度大於父級元素時，換行，換行的時候遇到前一個float並在其後顯示
<style>
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
.box1{
width:100px;
height:100px;
background-color:red;
float:left
}
.box2{
width:100px;
height:50px;
background-color:blue;
float:left
}
.box3{
width:400px;
height:50px;
background-color:green;
float:left
}
</style>
執行結果：
如果使用inline-block,結果會是怎樣呢？
<style>
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
.box1{
width:100px;
height:100px;
background-color:red;
display:inline-block
}
.box2{
width:100px;
height:50px;
background-color:blue;
display:inline-block
}
.box3{
width:400px;
height:50px;
background-color:green;
display:inline-block
}
</style>
執行結果：
此時框3是另起一行而不是跟在框1之後，(1,2之間的縫隙這裏就不說了) 這也是一個使用inline-block和float的判斷，如果模塊寬度不一樣使用float排版可能會導致跟預想結果不一樣，所以在寬高不變的情況下使用float是極好的，如果不一致的話需要看具體的佈局，使用恰當的屬性。
以下貼代碼，只貼修改的部分，其他不變，結構不變。
如果去掉box3的float：left會是什麼結果？按照理解，浮動元素不佔據空間，也就是框框3會無視框框1，框框2直接緊鄰父元素的邊框顯示，也就是框框1會蓋住框框3?那結果呢？
.box3{
width:100px;
height:50px;
background-color:green;
}
執行結果：
爲何框3的文字會出現在下邊而不是被框1覆蓋？接着看代碼，看圖
.box3{
height:50px;
background-color:green;
}
執行結果：
看出不一樣了沒？是的。box3沒有定義width;去掉了width,不定義寬度的情況下默認寬度就是父元素的寬度，也就是說此時width:500px;浮動元素覆蓋非浮動元素，也就是框3前邊200px的寬度被浮動元素覆蓋了，之所以文字沒有被覆蓋而且文字被浮動元素擠在200px之後的位置，原因呢？
浮動元素不會佔據塊的空間，所以框三就是100%的父容器寬度 500px，但是浮動元素會佔據另外的空間，也就是行框空間，通俗的講就是文本所佔的空間。
這也是圖片float之後，文本會自動環繞圖片的原因。浮動元素不佔據塊級空間，但會影響塊級元素之內的文字以及內聯元素。
如此的話如果想要三個框寬度一樣，那麼只需要將框三width:300px;
.box3{
width:300px;
height:50px;
background-color:green;
}
執行結果：
到這裏基本的浮動說完了，那就要說說問題了，浮動雖然好用，但是也會在實際中出現很多問題。例如：
<style>
.boxBg{
margin: 0 auto;
position:relative;
width:500px;
border:2px solid #ccc;
background-color:#ccd;
}
.box1{
float:left;
width:100px;
height:50px;
background-color:red;
}
.box2{
float:left;
width:100px;
height:50px;
background-color:blue;
}
.box3{
float:left;
width:100px;
height:50px;
background-color:green;
}
</style>
執行結果：
很常見的問題，正常情況下。應該灰色的背景會跟框一樣高，可事實總是不會盡如人意 :)
這種情況產生的原因，都知道是因爲浮動造成的，是的，是浮動，很多地方有說浮動元素會脫離普通流，所以普通元素可以當浮動元素不存在，所以這裏就不會撐開背景了，但是認真看的同學，一定會記得上邊有提到浮動元素不會影響塊框，但是會影響行框，也就是文字或內聯元素，不管是塊級元素還是內聯元素都屬於普通流，如果浮動元素脫離普通流又爲何會影響行框？其實我覺得不必要糾結於這些概念性的東西。按照我的理解浮動元素就是跟塊級元素不在一個水平空間，跟文字內聯元素在一個空間，所以這裏邊框就相當於在背景之上，所以不會影響背景元素，平常所說的清除浮動，並不是說把浮動元素的float屬性去掉，而是清除其周圍的浮動元素，使其自身周圍沒有浮動元素，所以如果想讓框三到第二行，不能在框2裏邊用clear:right;而是需要在框3裏邊使用clear:left;
.box3{
float:left;
width:100px;
height:50px;
background-color:green;
clear:left
}
執行結果：
ok!理解了這個，下來再說說如何使背景和框等高，第一種：最直接的辦法就是直接設置背景高度和框相等就Ok了，當然這個不是重點，下面來說說清除浮動。首先先看看例子：
<!DOCtype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.boxBg{
margin: 0 auto;
position:relative;
width:500px;
border:2px solid #ccc;
background-color:#ccd;
}
.box1{
float:left;
width:100px;
height:50px;
background-color:red;
}
.box2{
float:left;
width:100px;
height:50px;
background-color:blue;
}
.box3{
float:left;
width:100px;
height:50px;
background-color:green;
}
.clear{
width:100px;
height:50px;
}
</style>
</head>
<body>
<div class="boxBg">
<div class="box1">
框框1
</div>
<div class="box2">
框框2
</div>
<div class="box3">
框框3
</div>
<div class="clear"></div>
</div>
</body>
</html>
執行結果：
以上結果實現了結果，很明顯是直接添加了一個高度相等的空元素，因爲此元素沒有浮動，所以是跟背景一樣，因此背景被撐開了。其實是用清除浮動的原理跟這個是一樣的，也是想辦法撐開背景；以上去掉clear的寬，高，加上clear屬性
.clear{
clear:left;
}
執行結果：
這個可能還看不清楚，給clear框裏邊加幾個字試試看
執行結果：
因爲clear用了clear:left綜上所述，clear左邊不能有浮動元素，所以它必須另起一行顯示。如此便看到圖上的結果，其實還是用一個元素撐開的背景。當然還有其他方法實現，這裏主要是講清楚浮動就好了:)