使用css進(jìn)行布局，我們都知道浮動(dòng)，那么我們?yōu)槭裁匆褂酶?dòng)呢？下面我們就以京東登錄界面頂部的布局來(lái)討論這個(gè)問(wèn)題。下圖是我們寫(xiě)好的京東登錄界面。
在頂部布局中，代碼如下
html代碼
<header>
<divclass="header-content">
<ahref="index.html"class="logo">a>
<span>歡迎登錄span>
<divclass="login"><i>i><ahref="#">登錄頁(yè)面，調(diào)查問(wèn)卷a>div>
div>
header>
css代碼
公共樣式index.css
html,body,header,main,nav,aside,article,summary,details,footer,p,img,ul,li,ol,dl,dd,dt,
h1,h2,h3,h4,h5,section{
margin:0;
padding:0;
}
html,body{
width:100%;
font-family:"Microsoft YaHei","Hiragino Sans GB";
color:#666;
}
ul,ol,li{
list-style:none;
}
a{
text-decoration:none;
}
h3{font-weight:normal}
登錄界面樣式login.css
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
/*標(biāo)準(zhǔn)盒子模型*/box-sizing:border-box;
}
header{
width:100%;
height:80px;
}
header.header-content{
box-sizing:border-box;
width:990px;
height:80px;
margin:0auto;
vertical-align:middle;
/*background-color: red;*/}
header.header-content.logo{
float:left;width:160px;
height:60px;
/*左，上*/background:url("../image/icon.png")no-repeat0 15px;
}
header.header-content span{float:left;
font-size:24px;
padding-left:30px;
padding-top:20px;
}
header.header-content.login{
float:right;
font-size:12px;
margin-top:55px;
padding-bottom:5px;
font-family:Arial,Verdana,"\5b8b\4f53";
}
header.header-content.login i{
display:inline-block;
width:18px;
height:16px;
margin:0 5px;
background:url("../image/msg-icon.png")no-repeat;
}
header.header-content.login a{
color:#999;
position:relative;
top: -5px;
}
header.header-content.login a:hover{
color:#E4393C;
text-decoration:underline;
}
由上述代碼，我們可以看到在對(duì)頂部的左側(cè)“京東圖標(biāo)”，“歡迎登錄”設(shè)置左浮動(dòng)，對(duì)右側(cè)的“登錄頁(yè)面，調(diào)查問(wèn)卷”設(shè)置右浮動(dòng)。那么如果我們不設(shè)置浮動(dòng)會(huì)有什么效果呢？
當(dāng)我們把header.header-content.logo和header.header-content span的左浮動(dòng)關(guān)掉，此時(shí)頂部左側(cè)顯示的效果為：
此時(shí)我們可以看到出現(xiàn)2個(gè)問(wèn)題
1.京東的圖標(biāo)不見(jiàn)了
2.“歡迎登錄”跑到左邊了
京東圖標(biāo)是通過(guò)標(biāo)簽a顯示的。a是行內(nèi)元素，在文檔流中的時(shí)候因?yàn)槭?a target="_blank" rel="nofollow">行內(nèi)元素所以無(wú)法設(shè)置寬高；而當(dāng)設(shè)置了絕對(duì)定位或者浮動(dòng)，會(huì)生成塊框（即變成塊元素），所以就可以設(shè)置寬高了。這里把行內(nèi)元素a的浮動(dòng)關(guān)閉，會(huì)導(dǎo)致a標(biāo)簽設(shè)置的寬和高是無(wú)效的，所以京東的圖標(biāo)就不會(huì)顯示。
“歡迎登陸”是通過(guò)span標(biāo)簽顯示的，span也是行內(nèi)元素。行內(nèi)元素會(huì)在一條直線上，是在同一行的。當(dāng)顯示京東圖標(biāo)的a標(biāo)簽消失，此時(shí)span的左浮動(dòng)也關(guān)閉，所以span就會(huì)按照行內(nèi)元素的默認(rèn)狀態(tài)，顯示在一行的最左側(cè)。
使用浮動(dòng)可以是行內(nèi)元素變?yōu)?a target="_blank" rel="nofollow">塊級(jí)元素，浮動(dòng)是一把雙刃劍，我們要注意一點(diǎn)，能不使用浮動(dòng)，則不要使用浮動(dòng)。
