Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
2,386
float屬性非常重要，而且有時也常常會讓人困惑為什麼會這樣？但其實它在CSS中，在定位、排版也扮演非常重要的角色。務必瞭解。它是一般在講的浮動定位。有float:left、float:right兩種可供選擇，它會將該元素整個往左、往右移並脫離網頁原先流向，並且會讓周圍的元素圍繞它。此篇文章還會稍微提到clear與overflow。
最近這幾篇都發一些比較基本觀念性質的，但我覺得這些都非常重要，等你熟悉之後，再去學css整理術、bootstrap、compass、fire.app等好玩的framework或工具。若對基本觀念尚未熟悉，先看些基本的教學會讓你更容易入門，且有趣。
先看html範例吧(尚未加上float屬性)：
.theDiv{
width:400px;
border:1px solid black;
}
.navigation{
border:1px solid black;
width:100px;
}
.para{
border:1px solid red;
width:80px;
}
項目一
項目二
項目三
段落一
顯示如下：
一、將.navigation設成浮動定位向左：
.navigation{
border:1px solid black;
width:100px;
float:left; /* 新增這行：浮動定位向左 */
}
顯示如圖：
.navigation設定浮動定位向左後，已脫離原先的網頁流向，而”段落一”則會圍繞在它周圍。注意紅色框線的異常，其實段落一原來的位置會在接近”項目一”的地方，但因為.navigation是浮動向左，所以”段落一”會被推擠往下。
如果我不設定”段落一”的width：
.navigation{
border:1px solid black;
width:100px;
float:left; /* 還是設定成浮動向左 */
}
.para{
border:1px solid red;
width:80px; /* 移除這行 */
}
顯示如圖：
此時”段落一”內文會在右邊，且紅色線框會佔據整個上層寬度(因為沒設width)，所以”段落一”會在右邊而不是在底下了。
二、將.navigation設定浮動定位向右：
.navigation{
border:1px solid black;
width:100px;
float:right; /* 新增這行：浮動定位向右 */
}
顯示如圖：
列表(.navigation)整個向右浮動了，”段落一”也會跟著往上移了，但最外圍的div(.theDiv)黑色框線卻沒有將它包圍住，這也是因為列表(.navigation)已經脫離它網頁流向的關係，所以最外圍的div其實不太想理它了。
這問題有兩種解決方式
第一：我們來將”段落一”多增加些內文並且將寬度移除：
有看出端倪了嗎？最外圍的div(.theDiv)會跟隨著紅色框線的高度而變動，以致於”看起來”有將列表(.navigation)給包圍住。
第二：針對最外圍的div (.theDiv)設定overflow:hidden
.theDiv{
width:400px;
border:1px solid black;
overflow:hidden; /*新增這行：若溢位時，則隱藏*/
}
.navigation{
border:1px solid black;
width:100px;
float:right; /* 列表還是向右浮動定位 */
}
顯示如圖：
經由設定overflow:hidden，最外圍的div(.theDiv)會將列表(.navigation)給包圍住了。至於為什麼，其實這我不太會解釋，忘了以前從哪看來的，哈。
三、將.para分別設定成浮動向左、浮動向右
.para{
border:1px solid red;
width:80px;
float:left; /* 浮動定位向左 */
}
顯示如圖：
因為”段落一(.para)”設定浮動向左，所以最外圍的div(.theDiv)也就沒有去理它了，同理，可將最外圍的div(.theDiv)設定overflow:hidden，就會再將”段落一(.para)”給包圍住了。
.para{
border:1px solid red;
width:80px;
float:right; /* 浮動定位向右 */
}
顯示如圖：
段落一向右浮動，而最外圍的div(.theDiv)未將它包圍住。同理可針對最外圍div(.theDiv)設定overflow:hidden將它包圍起來。
四、關於clear:both
clear可以設定的屬性有：left、right、both。
其旨在告訴該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西，若有的話，該元素會自動往下移。
請重新看此html：
.theDiv{
width:400px;
border:1px solid black;
}
.navigation{
border:1px solid black;
width:100px;
float:right
}
.para{
border:1px solid red;
width:80px;
}
.footer{
border:1px solid orange;
}
項目一
項目二
項目三
段落一
這是底部
顯示如圖：
.navigation有設定浮動向右，然後增加了.footer的div，但.footer卻橫跨過.navigation了，要避免此狀況，只要針對.footer設定clear:both即可：
.footer{
border:1px solid orange;
clear:both; /* 新增這行 */
}
顯示如圖：
.footer區域往下移，因為左右兩邊不可以有任何東西。
參考資料：
htmldog：Page Layout
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章，獲得
23313次喜歡