MozTW 討論區
https://forum.moztw.org/

CSS clear 屬性
https://forum.moztw.org/viewtopic.php?f=13&t=23951		 第 1 頁 (共 1 頁)
發表人:  Amauds [ 2008-08-17, 10:55 ]
文章主題 :  CSS clear 屬性
代碼:
<div id="a_container" style="width:65%; float:left">
</div>
<div id="b_container" style="width:30%; float:left">
 <div style="float:right"><img src="..." width="80" height="25"/></div>
 <p>............</p>
 <div style="clear:both">重點</div>
 <p>............</p>
</div>

在 FX 2 時「重點」會讓 float 中止，
但僅侷限於 b_container 內部，
b_container 本身的 float 效果仍在，
在 FX 3 時，「重點」不僅中止 float 效果，
連帶使得 b_container 的 float 出現不同結果，
在「重點」以上完全照著所有 float 設定排版顯示，
而「重點」以下則失去 float 屬性效果；
變成 b_container 被「撐」大，如同往常 IE 對 block 元素的處理，
請問這樣是正確的嗎？
要怎麼作比較適合在一個大的 float 排版區塊中進行一個小區塊的 float 排版處理？
發表人:  fyi [ 2008-08-17, 15:20 ]
文章主題 :  property
謝謝! 最近常常寫web page, 這個篇碼實在太好,太handy了!
發表人:  wini [ 2008-08-17, 15:28 ]
文章主題 : 
不太清楚首篇最後想弄什麼樣子，不過在 div#a_container 的內容裡加個 &nbsp; 試試，Fx3 好像不會搭理沒內容的元素？
發表人:  不惑仔Boohover [ 2008-08-17, 19:03 ]
文章主題 :  css float and clear
Amauds 寫:
在 FX 2 時「重點」會讓 float 中止，
但僅侷限於 b_container 內部，
b_container 本身的 float 效果仍在，
在 FX 3 時，「重點」不僅中止 float 效果，
連帶使得 b_container 的 float 出現不同結果，
在「重點」以上完全照著所有 float 設定排版顯示，
而「重點」以下則失去 float 屬性效果；
變成 b_container 被「撐」大，如同往常 IE 對 block 元素的處理，
請問這樣是正確的嗎？


1.floating的元素，box脫離原在的區塊，但不影響「其前後」 block-levle 元素的正常排版(normal flow)；而只會「擠開」其後 inline-levle內容及 floating 元素。
2.元素被指定 clear ，由該元素起，不再受「其前」 floating 元素影響，回復成原來應有的排版。

所以，由「重點 div」開始，包括其後的 p，都會回復成正常 block-level 排版方式，而 b_container 也是 floating 元素，依據規則，高度會自動依據「其內容」縮放。我想這些都是標準呈現，從 fx2 就是這樣了，並不是 fx3 才變的。

Amauds 寫:
要怎麼作比較適合在一個大的 float 排版區塊中進行一個小區塊的 float 排版處理？


不懂你想怎麼呈現？因為不知你在「重點 div」clear是什麼目的？

wini 寫:
Fx3 好像不會搭理沒內容的元素？

不會這樣，只要有元素都會認為有，只是 block-levle 像 p 或 div 沒有高度，或 inline-levle 像 span 沒有寬度，看不見而已。
發表人:  Amauds [ 2008-08-18, 13:01 ]
文章主題 : 
「重點 div」的存在是因為 Fx 2 時的排版,
當時只能這麼作, 才能達成小區域 float 要求,
而 fx 3 卻不理會(或正確理會)這樣的元素,
致使版面走樣,
後來刪除掉「重點 div」就恢復了,
這是否意謂者該版面無法向下相容於 fx 2 ?
發表人:  不惑仔Boohover [ 2008-08-18, 23:42 ]
文章主題 : 
你所說的問題，在 fx2 我都沒遇過，可能還是沒辦法體會你說的意思 吧。:oops:
不過只要依據 float 的意義去編排， fx 應該不會有問題，反而在 ie 問題比較多。

ps.我很久前就已改用 position 做大排版了， float 版面比較容易因為其內容改變而垮掉。
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/