在 CSS 中，我們通過 float 屬性實現元素的浮動。
float的一些使用
博客佈局形式
效果圖如下：
參考代碼如下： <style>
body
{
margin-left:0,100px;
}
div
{
width:200px;
height:200px;
background:blue;
}
#left
{
float:left;
}
#right
{
float:right;
}
#footer
{
margin:0 auto;
width:800px;
height:50px;
background:red;
clear:both;
}
</style>
</head>
<body bgcolor="gray">
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>首頁佈局
<style type="text/css">
#header,#main,#footer
{
width:800px;
margin:0 auto;
}
#header
{
height:100px;
background:blue;
}
#left,#mid,#right
{
height:300px;
float:left;
}
#left,#right
{
width:150px;
}
#left
{
height:200px;
background:pink;
}
#mid
{
width:500px;
background:green;
}
#right
{
background:gold;
}
#main
{
background:brown;
}
#footer
{
clear:both;
height:100px;
background:aqua;
}
.clear
{
clear:both;
}
</style>
</head>
<body>
<div id="header">頭</div>
<div id="main">
<div id="left">左</div>
<div id="mid">中</div>
<div id="right">右</div>
<div class="clear"></div>
</div>
<div id="footer">尾</div>
</body>css 的一些注意事項
當有一個塊有父塊，子類有浮動，而父親沒有設置高度時，可能會出現父類的某些設置不生效，如background，
解決辦法就是去掉浮動的影響。方法有三種
（1） 通過在父類的子類的後面，加一個塊<div class="clear"></div> ，設置樣式
.clear
{
clear:both; //w3c推薦
}
（2）設置父塊的樣式
overflow：hidden; 大部分瀏覽器都不會有問題，但是ie6沒有效果，這是還需要添加一個屬性zoom：1，用來解決ie6的css兼容性問題
（3）設置父塊的一個新類
<style type="text/css">
#header,#main,#footer
{
width:800p
margin:0 auto;
}
#header
{
height:100px;
background:blue;
}
#left,#mid,#right
{
height:300px;
float:left;
}
#left,#right
{
width:150px;
}
#left
{
height:200px;
background:pink;
}
#mid
{
width:500px;
background:green;
}
#right
{
background:gold;
}
#main
{
background:brown;
}
#footer
{
clear:both;
height:100px;
background:aqua;
}
.clearFix:after //添加了一個新類clearFix的僞類
{
clear:both;
height:0;
display:block;
line-height:0;
visibility:hidden;
content:"";
}
.clearFix
{
zoom:1;//解決ie6,7的兼容性
}
#zoom
{
width:1000px;
height:1000px;
background:blue;
zoom:0.1;
}
</style>
</head>
<body>
<div id="header">頭</div>
<div id="main" class="clearFix"> //添加了一個新類clearFix，用來清除浮動
<div id="left">左</div>
<div id="mid">中</div>
<div id="right">右</div>
</div>
<div id="footer">尾</div>
<div id="zoom"></div>
</body>這種方法，比較常用。
又是float在某些瀏覽器裏面還會出現一些特別的效果
如在ie6中設置了margin和float 就會出現雙倍的margin邊距，解決方法就是在div裏面添加一個display:inline;
<style type="text/css">
body,div
{
margin:0;
padding:0;
}
div
{
width:200px;
height:200px;
background:gold;
margin:0 0 0 100px;
float:left;
display:inline;//這個是用來解決雙倍邊距的
}
</style>
</head>
<body bgcolor="gray">
<div></div>
</body>css精靈效果
css精靈實現 ，普通情況下，顯示登錄，鼠標移動上時，顯示註冊效果。
需要準備一張
<style>
#last a
{
width:102px;
height:42px;
background-image:url('img/2013-10-08_154717.png') ;
display:block;
//border:1px solid red;
}
#last a:hover//僞類
{
background-position:102px -42px;
}
</style>
<body>
<div id="last">
<a href="#"></a>
</div>
</body>絕對定位的使用
相對佈局：某個東西設置成相對佈局，這個東西的位置不會被他後面的元素佔據，這個位置會變成空白
絕對佈局：某個東西設置成絕對佈局，這個東西的位置會被他後面的元素佔據。
要實現如下的效果
子類設置了絕對佈局，父類需要設置成相對佈局，才能在父類裏面顯示成這個效果。
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header,#main
{
width:200px;
height:150px;
}
#header
{
background:blue;
}
#main
{
position:absolute;//子類設置了絕對佈局
top:150px;
left:200px;
background:brown;
}
#footer
{
background:aqua;
width:300px;
height:300px;
}
#all
{
width:600px;
height:450px;
margin:200px auto;
border:1px solid;
position:relative;//父類需要設置這個
font-size:18px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="all">
<div id="header">1</div>
<div id="main">
2
</div>
<div id="footer">3</div>
</div>
</body>