CSS(11)CSS浮動和清理

2022-10-11 03:00:15 字數 967 閱讀 6413

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。

由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

1、請看下圖,當把框 1 向右浮動時,它脫離文件流並且向右移動,直到它的右邊緣碰到包含框的右邊緣:

2、再請看下圖,當框 1 向左浮動時,它脫離文件流並且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中,所以它不佔據空間,實際上覆蓋住了框

2,使框 2 從檢視中消失。

3、如果把所有三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前乙個浮動框。

4、如下圖所示,如果包含框太窄,無法容納水平排列的三個浮動元素,那麼其它浮動塊向下移動,直到有足夠的空間。

5、如果浮動元素的高度不同,那麼當它們向下移動時可能被其它浮動元素「卡住」:

6、浮動框旁邊的行框被縮短,從而給浮動框留出空間,行框圍繞浮動框。

因此,建立浮動框可以使文字圍繞影象:

要想阻止行框圍繞浮動框,需要對該框應用 clear

屬性。clear 屬性的值可以是

left、right、both 或 none,它表示框的哪些邊不應該挨著浮動框。

為了實現這種效果,在被清理的元素的 上外邊距 上新增足夠的空間,使元素的頂邊緣垂直下降到浮動框下面:

這是乙個有用的方法,它讓周圍的元素為浮動元素留出空間。

假設希望讓乙個浮動到文字塊的左邊,並且希望這幅和文字包含在另乙個具有背景顏色和邊框的元素中。

如果只有浮動,沒有清理,浮動元素脫離了文件流,所以包圍和文字的 div 不佔據空間。

由於沒有現有的元素可以應用清理,所以我們只能新增乙個空元素並且清理它。

some text

選擇對布局中的所有東西進行浮動,然後使用適當的有意義的元素(常常是站點的頁尾)對這些浮動進行清理。這有助於減少或消除不必要的標記。

some text

原文位址:

CSS 11 CSS盒子的定位

在css中有乙個非常重要的屬性position,然而要使用css進行定位操作,並不僅僅通過這個屬性來實現,二者不要混淆。先看一段 一 relative演示 html部分 box 1 css部分 father son 頁面效果 從css上看沒有對盒子設定任何浮動屬性和定位屬性,所以頁面展示效果就是標準...

CSS清理浮動

發表於2011年2月1日 由sivan 文章目錄 前言清理浮動的方法 使用帶有clear屬性的空元素 使用css的 after偽元素 使用css的overflow屬性進行怪異處理 給浮動元素的容器新增浮動 使用鄰接元素清理 其他方法 我的解決方案 綜合運用方案 一勞永逸方案 小結 update 20...

CSS 清理浮動 clear屬性

文章 雖然浮動可以便於頁面布局,但同時會產生一些問題,也就是常說的 浮動元素最常見的缺陷是 父元素的高度塌陷和影響兄弟元素的位置。首先,看看父元素的高度塌陷。假設有乙個容器,其中兩個子元素,乙個子元素向左浮動,乙個子元素向右浮動。如下 box2 圖5 29 浮動導致容器高度塌陷 這種塌陷會影響 甚至...