標籤：:hover ora splay 換行 建立 over inline require 漂亮
Float定義：float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於映像，使文本圍繞在映像周圍，不過在 CSS 中，任何元素都可以浮動。
浮動元素會產生一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會儘可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
注釋：
假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
簡單一實例：
建立水平菜單：
代碼：
<html><head><style type="text/css">ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{float:left;width:7em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}a:hover {background-color:#ff3300}li {display:inline}</style></head><body><ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul><p>在上面的例子中，我們把 ul 元素和 a 元素浮向左浮動。li 元素顯示為行內元素（元素前後沒有換行）。這樣就可以使列表排列成一行。ul 元素的寬度是 100%，列表中的每個超連結的寬度是 7em（當前字型尺寸的 7 倍）。我們添加了顏色和邊框，以使其更漂亮。</p></body></html>View Code
建立無表格的首頁：
代碼：
<html><head><style type="text/css">div.container{width:100%;margin:0px;border:1px solid gray;line-height:150%;}div.header,div.footer{padding:0.5em;color:white;background-color:gray;clear:left;}h1.header{padding:0;margin:0;}div.left{float:left;width:160px;margin:0;padding:1em;}div.content{margin-left:190px;border-left:1px solid gray;padding:1em;}</style></head><body><div class="container"><div class="header"><h1 class="header">W3School.com.cn</h1></div><div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div><div class="content"><h2>Free Web Building Tutorials</h2><p>At W3School.com.cn you will find all the Web-building tutorials you need,from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p><p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div><div class="footer">Copyright 2008 by YingKe Investment.</div></div></body></html>View Code
CSS float 屬性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
