指定元素是否浮動。可設定的值有：
- left：元素的矩格向容器的左邊靠。其它內容，則由此元素的右邊通過，開始位置與此元素的上方對齊；文字與文字行元素（inline）會圍繞此元素。display 特徵失效，除非是 display:none。
- right：元素的矩格向容器的右邊靠。其它內容，則由此元素的左邊通過，開始位置與此元素的上方對齊；文字與文字行元素會圍繞此元素。display 特徵失效，除非是 display:none。
- none：元素不浮動，此為預設值。
- inherit：繼承父元素的特徵值。
後面的元素要用 CLEAR 特徵，才能清除 float 元素的影響。
- 風格用法：
<div style='width:300px;background:#ffdddd;color:black'>John F. Kennedy said: <img style='width:200px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> ask not what your country can do for you - ask what you can do for your country. </div>
<div style='width:300px;background:#ffdddd;color:black'>John F. Kennedy said: <img style='float:left; width:200px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> ask not what your country can do for you - ask what you can do for your country. </div><br clear='left'/> <div style='width:300px;background:#ffdddd;color:black'>John F. Kennedy said: <img style='float:right; width:200px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> ask not what your country can do for you - ask what you can do for your country. </div><br clear='right'/> - 執行結果： John F. Kennedy said:
ask not what your country can do for you - ask what you can do for your country. John F. Kennedy said: ask not what your country can do for you - ask what you can do for your country.
John F. Kennedy said: ask not what your country can do for you - ask what you can do for your country.
- 上面的第二例設了 float:left，第三例設了 float:right，所以展現風格與第一個不同。
- 第三例前的 BR 元素有加上 CLEAR。
將區塊左右並列。可用在 DIV + CSS 佈局。
- 風格用法：
<div style='float:left; width:40%; background:#383'>好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 </div><div style='float:right; width:40%; background:#338'>好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 </div><br clear='left'/>
- 執行結果： 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。
- DIV 區塊原本是上下排列，上例中的兩個 DIV 區塊都宣告 float 所以可以左右並列。
用在文字行元素。下例是用在 SPAN 元素。
- 風格用法：
<span style='width:40%; background:#383'> 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 </span> <span style='width:40%; background:#338'> 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 </span> <span style='float:left; width:40%; background:#383'> 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 </span> <span style='float:right; width:40%; background:#338'> 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 </span> <br clear='both'/>
- 執行結果： 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。
- 上例顯示，float 會將 SPAN 元素變成區塊。
父元素區塊的高度未能展開。下例中的 DIV 區塊的高度未能展開，只達文字的高度；這種情形只發生在子元素設為 float 時。
- 風格用法：
<div style='border:solid 1px red;'><img style='float:left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> 好玩遊戲 </div>
- 執行結果： 好玩遊戲
解決方法。請參考 How To Clear Floats Without Structural Markup。此文提出以下解決方法。對 IE/Win 來說，只要將父元素設為 hasLayout 即可，通常使用 zoom:1；下例中 DIV 加上 width:250px，會使 DIV 變成 hasLayout 狀態。對 Firefox, Safari, Chrome 則使用 .clearfix:after 所定義的風格區塊。下面的方法未涵蓋 IE/Mac 瀏覽器。
- 風格用法：
<style type='text/css'>
.clearfix {width:250px; border:solid 1px red;}
.clearfix:after
{content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style> <div class=clearfix><img style='float:left' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> 好玩遊戲 </div> - 執行結果： 好玩遊戲
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.brd {width:300px;
height:350px;
border:solid 1px red;
}
.hvr:hover {float:left;}
.hvr:active {float:right;}
</style> <div class=brd>John F. Kennedy said: <a class=hvr href='javascript:void(0)'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </a> ask not what your country can do for you - ask what you can do for your country. </div> - 執行結果： John F. Kennedy said: ask not what your country can do for you - ask what you can do for your country.
- 上例，IE6, Firefox 成功；Safari, Chrome 失敗。
javascript 應用：可以用 元素物件.style 讀取與設定 float。在 IE 用 styleFloat；在 Firefox, Safari, Chrome 用 cssFloat。
- 風格用法：
<span id='js'
style='float:left; width:40%; background:#383'> 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。 </span> <br clear='left'/> <script type='text/javascript'>
function swFloat()
{
var os=document.getElementById('js').style;
var pty=( os.cssFloat ) ? 'cssFloat' : 'styleFloat';
os[pty]=( os[pty]== 'left' ) ? 'right' : 'left';
}
</script> <p><a href='javascript:swFloat()'> 點此改變 float</a> - 執行結果： 好玩遊戲, 線上遊戲, 彈珠遊戲, 空戰遊戲, 益智遊戲, 射擊遊戲, 武打遊戲, 賽車遊戲。
