關於浮動的前世今生

2021-09-01 08:09:48 字數 2429 閱讀 5598

在排版軟體裡面,存放文字的盒子可以被設定為允許**混排,或者無視它。無視**混排將會允許文字出現在的上面,就像它甚至不會在那裡一樣。這就是是否是頁面流的一部分的區別。網頁設計與此非常類似。

在網頁設計中,應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被從網頁流裡面移除了,就像印刷布局裡面的文字框被設定為無視頁面環繞一樣。絕對定位的元素不會影響其它元素,其它元素也不會影響它,無論它是否和其它元素挨著。

像這樣在乙個元素上用css設定浮動:

#sidebar
fload屬性有四個可用的值:left 和right 分別浮動元素到各自的方向,none (預設的) 使元素不浮動,inherit 將會從父級元素獲取float值。

除了簡單的在周圍包圍文字,浮動可用於建立全部網頁布局。

同樣的布局可以通過在外容器使用相對定位,然後在頭像上使用絕對定位來實現。這種方式中,文字不會受頭像大小的影響,不會隨頭像的大小而有相應變化。

清除(clear)是浮動(float)的相關屬性.乙個設定了清除浮動的元素不會如浮動所設定的一樣,向上移動到浮動元素的邊界,而是會忽視浮動向下移動。如下,一圖頂千言。

上例中,側欄向右浮動,並且短於主內容區域。頁尾(footer)於是按浮動所要求的向上跳到了可能的空間。要解決這個問題,可以在頁尾(footer)上清除浮動,以使頁尾(footer)待在浮動元素的下面。

清除(clear)也有4個可能值。最常用的是 both,清楚左右兩邊的浮動。left 和 right 只能清楚乙個方向的浮動。none 是預設值,只在需要移除已指定的清除值時用到。inherit 應該時第五個值,不過很奇怪的是 ie 不支援(這個不奇怪吧,ie 從來都這麼特立獨行吧 -糖伴西紅柿注)。只清除左邊或右邊的浮動,實際中很少見,不過絕對有他們的用處。

使用浮動(float)的乙個比較疑惑的事情是他們怎麼影響包含他們的父元素的。如果父元素只包含浮動元素,那麼它的高度就會塌縮為零。如果父元素不包含任何的可見背景,這個問題會很難被注意到,但是這是乙個很重要的問題。

塌陷的直觀對立面更不好,看看下面的情況:

當上面的塊級元素自動擴充套件以適應浮動元素時,段落間的文字流中會出現非自然的空白換行,而且沒有有效的方法來修正這個問題。對於這種情況,設計師的抱怨會更甚於對塌陷的抱怨(沒理解,不是設計完成之後才會進行頁面編碼嗎?- 糖伴西紅柿)。

為了防止怪異的布局和跨瀏覽器的問題,塌陷問題幾乎總是被要處理的。我們在容器中的浮動元素之後,容器結束之前來清除浮動。

如果你很明確的知道接下來的元素會是什麼,可以使用 clear:both; 來清除浮動。這個方法很不錯,它不需要 hack,不新增額外的元素也使得它有良好的語義性。當然事情並不是都可以這樣解決的,工具箱中還是需要另外幾個清除浮動的工具。

不同的情況需要不同的浮動清除方法。以乙個具有不同樣式塊的網格為例。

為了從視覺上較好的把相似的塊聯絡起來,需要在必要的地方開啟新行,這裡是顏色改變的地方。如果每個顏色組都有乙個父元素的話,我們可以使用 overflow 或者 簡單清除方法。或者,在每組之間用乙個空div方法。額外的 div 之前並不存在,可以自己試試來看看哪個方法好。

浮動因脆弱而飽受詬病。大多數的脆弱性來自於 ie6 及其一系列的浮動相關 bug。因為越來越多的設計師不再支援 ie6 了,你也可以不關注它了。不過對於那些要關注的人來說,這裡有些大概。

原文連線:

LinkedList前世今生

1 linkedlist元素在內部儲存的實現,節點定義即指向前一元素的指標,後一元素的指標,當前元素的值。private static class entry 2 建立乙個空鍊錶。預設有個頭指標header。private transient entryheader new entry null,n...

前世今生 STL

嘛,string就是乙個用於字串處理的標準類庫,但是需要注意的是其速度可能會比直接操縱char陣列要慢一些。reverse這個方法是我一直都想找到但是沒有找到的,在判斷回文的時候格外好用。string s abcdef string ss s ss abcdef reverse ss.begin s...

位址 前世今生

alu arithemetic and logic unit 書面意思是 算術與邏輯部件,運算器,算術與邏輯單元,通俗來講 cpu處理的資料位數。從4位 8位 16位 32位,處理能力越來越強。發問 16位計算能力如何處理20位的位址呢?cs ip 是一組暫存器,用於告知 cpu 當前將要讀取的彙編...