css positioning 第二式: float:left; float:right;

特點
  1. 元素 Box 脫離原有位置,左邊緣緊靠到容納區的左邊 (float:left) ,或右邊緣緊靠到容納區的右邊 (float:right) ,並獨立成一塊區域。但,不是實際獨立在另一個平面,所以也沒有向前堆疊。
  2. 移開後,元素的容納區及元素前、後的 block-level 元素,保持本來應有的編排模式,沒有因為 floated 元素的脫離而轉變模式。注意,有元素脫離,不論如何當然會造成原來有連動的內容的排列變動。
  3. 移開後,元素之後的 inline-level 元素 (當然,包括文字) ,會沿 floated 元素 box 的周邊流排 (flow) ,不會相互產生堆疊。這樣有道理的,因為 floated 元素還在同一個平面上。在 block-level box 元素上指定 clear ,可以解除沿 floated box 周邊流排的模式,因此, block-level box 及其 inline 內容會離開 floated box 以正常模式排列。
  4. 如果一個以上 floated 元素在同行,由於不會重疊,當然,就會緊靠著其它 floated 元素排列。指定 clear 也可以解除沿其它 floated 元素排列。
  5. 移開後,元素 Box 尺寸依據元素的內容來緊縮,這麼處理是合乎邏輯的,因為 Box 脫離獨立了,沒辦法與容納區作連動參考了。但是,如果 width 或 height 值不是 auto ,當然是依據這二個既定的尺寸值。
  6. 由於移開後獨立成一塊區域,當然元素就會是 block-level box ,忽略原來的形式。
  7. 內定值 (未指定時) 為 float:none ,就是沒有產生 floated Box 。
  8. 適用:所有元素。

clear

  1. 在 block-level 元素指定其 inline 內容不沿 floated 元素 box 的周邊流排 (flow) 。這也就使得這個 block-level 元素恢復應有的模式排列。
  2. 對應於 floated 元素當然就會有 clear:left;, clear:right; 二值;除此,多了 clear:both; 值,就像是先前二個值的合併。
  3. 內定值 (未指定時) 為 clear:none ,就是會沿 floated 元素 box 的周邊流排。
  4. 適用: block-level 元素。

css 體驗室

html 片段:試試橘區元素 (b) 怎麼變動。紅虛線內緣 (p) 為模擬容納區。
<article>
 <dl>
  <dt>賈誼論 蘇軾</dt>
  <dd>
   <p><b>非才之難,所以自用者實難……或者其自取也。</b>……,生之不能用漢文也。</p>
   <p>夫絳侯親握天子璽……</p>
   <p>為賈生者,上得其君……</p>
   <p>古之人,有高世之才……</p>
  </dd>
 </dl>
</article>
賈誼論 蘇軾

非才之難,所以自用者實難。惜乎,賈生,王者之佐,而不能自用其才也。夫君子之所取者遠,則必有所待;所就者大,則必有所忍。古之賢人,皆負可致之才,而卒不能行其萬一者,未必皆其時君之罪,或者其自取也。愚觀賈生之論,如其所言,雖三代何以遠過?得君如漢文,猶且以不用死,然則是天下無堯、舜,終不可有所為耶?仲尼聖人,歷試於天下,苟非大無道之國,皆欲勉強扶持,庶幾一日得行其道。將之荊,先之以子夏,申之以冉有。君子之欲得其君,如此其勤也。孟子去齊,三宿而後出晝,猶曰﹕「王其庶幾召我。」君子之不忍棄其君,如此其厚也。公孫丑問曰﹕「夫子何為不豫?」孟子曰﹕「方今天下,舍我其誰哉?而吾何為不豫?」君子之愛其身,如此其至也。夫如此而不用,然後知天下果不足與有為,而可以無憾矣。若賈生者,非漢文之不能用生,生之不能用漢文也。

夫絳侯親握天子璽,而授之文帝,灌嬰連兵數十萬,以決劉、呂之雌雄,又皆高帝之舊將。此其君臣相得之分,豈特父子骨肉手足哉!賈生,洛陽之少年,欲使其一朝之閒,盡棄其舊而謀其新,亦已難矣。

為賈生者,上得其君,下得其大臣,如絳、灌之屬,優游浸漬而深交之,使天子不疑,大臣不忌,然後舉天下而唯吾之所欲為,不過十年,可以得志。安有立談之閒,而遽為人痛哭哉?觀其過湘,為賦以弔屈原,縈紆鬱悶,趯然有遠舉之志。其後以自傷哭泣,至於夭絕,是亦不善處窮者也。夫謀之一不見用,則安知終不復用也?不知默默以待其變,而自殘至此。嗚呼!賈生志大而量小,才有餘而識不足也。

古之人,有高世之才,必有遺俗之累。是故非聰明睿智不惑之主,則不能全其用。古今稱苻堅得王猛於草茅之中,一朝盡斥去其舊臣而與之謀。彼其匹夫,略有天下之半,其以此哉!愚深悲生之志,故備論之。亦使人君得如賈生之臣,則知其有狷介之操,一不見用,則憂傷病沮,不能復振。而為賈生者,亦謹其所發哉!

float, clear

html 片段:橘區 (i) 、綠區 (b) 、藍區、紅區、黃區 (p) 排列組合試試其中的奧妙嘍。
<article>
 <dl>
  <dt>賣柑者言 劉基</dt>
  <dd>
   <p><i>杭有賣果者……則乾若敗絮。</i><b>予怪而問之曰……為欺也!」</b></p>
   <p>賣者笑曰……而以察吾柑。」</p>
   <p>為賈生者,上得其君……</p>
   <p>予默然無應……</p>
  </dd>
  <dt>桃花源記 陶淵明</dt>
  <dd>
   <p>晉太原中……便舍船,從口入。</p>
   <p>初極狹,纔通人……</p>
   <p>既出,得其船……</p>
  </dd>
  <dt>雜說四 韓愈</dt>
  <dd><p>世有伯樂,然後有千里馬……</p></dd>
 </dl>
</article>
賣柑者言 劉基

杭有賣果者,善藏柑,涉寒暑不潰。出之燁然,玉質而金色。置於市,賈十倍,人爭鬻之。予貿得其一,剖之,如有煙撲口鼻。視其中,則乾若敗絮。予怪而問之曰:「若所巿於人者,將以實籩豆,奉祭祀、供賓客乎?將衒外以惑愚瞽乎?甚矣哉,為欺也!」

賣者笑曰:「吾業是有年矣,吾賴是以食吾軀。吾售之,人取之,未嘗有言;而獨不足於子乎?世之為欺者不寡矣,而獨我也乎?吾子未之思也!今夫佩虎符、坐皋比者,洸洸乎干城之具也,果能授孫、吳之略耶?峨大冠、托長紳者,昂昂乎廟堂之器也,果能建伊、皋之業耶?盜起而不知御,民困而不知救,吏奸而不知禁,法斁而不知理,坐糜廩粟而不知恥。觀其坐高堂、騎大馬、醉醇醴而飫肥鮮者,孰不巍巍乎可畏,赫赫乎可象也!又何往而不金玉其外、敗絮其中也哉。今子是之不察,而以察吾柑。」

予默然無應。退而思其言,類東方生滑稽之流。豈其憤世疾邪者耶?而託于柑以諷耶?

桃花源記 陶淵明

晉太原中,武陵人,捕魚為業,緣溪行,忘路之遠近。忽逢桃花林,夾岸數百步,中無雜樹,芳草鮮美,落英繽紛,漁人甚異之﹔復前行,欲窮其林。林盡水源,便得一山。山有小口,彷彿若有光,便舍船,從口入。

初極狹,纔通人;復行數十步,豁然開朗。土地平曠,屋舍儼然。有良田美池桑竹之屬,阡陌交通,雞犬相聞。其中往來種作,男女衣著,悉如外人﹔黃發垂髫,并怡然自樂。見漁人,乃大驚,問所從來,具答之,便要還家,設洒殺雞作食,村中聞有此人,咸來問訊。自云先世避秦時亂,率妻子邑人,來此絕境,不復出焉﹔遂與外人間隔。問今是何世,乃不知有漢,無論魏、晉。此人一一為具言所聞,皆嘆惋。余人各復延至其家,皆出洒食。停數日辭去,此中人語云:「不足為外人道也。」

既出,得其船,便扶向路,處處志之。及郡下,詣太守說此。太守即遣人隨其往,尋向所志,遂迷不復得路。南陽劉子驥,高士也,聞之,欣然規往,未果,尋病終。后遂無問津者。

雜說四 韓愈

世有伯樂,然後有千里馬。千里馬常有,而伯樂不常有。故雖有名馬,只辱於奴隸人之手,駢死於槽櫪之間,不以千里稱也。馬之千里者,一食或盡粟一石。食馬者,不知其能千里而食也。是馬也,雖有千里之能,食不飽,力不足,才美不外見,且欲與常馬等不可得,安求其能千里也!策之不以其道,食之不能盡其材,鳴之而不能通其意,執策而臨之曰:“天下無馬。”嗚呼!其真無馬邪?其真不知馬也!

更新日期:

google 論壇

css animation art (groups.google.com/group/css-animation-art/)