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 脫離獨立了,沒辦法與容納區作連動參考了。但是,如果 widthheight 值不是 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/)