請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。
在 css 中，我們通過 float 屬性實現元素的浮動。
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，建立浮動框可以使文字圍繞影象：
為了實現這種效果，在被清理的元素的上外邊距上新增足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
讓我們更詳細地看看浮動和清理。假設希望讓乙個浮動到文字塊的左邊，並且希望這幅和文字包含在另乙個具有背景顏色和邊框的元素中。您可能編寫下面的**：
.news這種情況下，出現了乙個問題。因為浮動元素脫離了文件流，所以包圍和文字的 div 不佔據空間。.news img
.news p
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
這樣可以實現我們希望的效果，但是需要新增多餘的**。常常有元素可以應用 clear，但是有時候不得不為了進行布局而新增無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news這樣會得到我們希望的效果。不幸的是，下乙個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁尾）對這些浮動進行清理。這有助於減少或消除不必要的標記。.news img
.news p
事實上，w3school 站點上的所有頁面都採用了這種技術，如果您開啟我們使用 css 檔案，您會看到我們對頁尾的 div 進行了清理，而頁尾上面的三個 div 都向左浮動。
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left，right clear屬性 清除浮動 left，right，both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...
CSS浮動定位
left 左浮動，左邊沒有任何元素 right 右浮動，右邊沒有任何元素 none 不浮動 清空左右的浮動元素 both 清除左右兩邊的浮動 left和right 只清除乙個方向的浮動 none是預設值 只在需要移除一直盯的清除值時用到 如果乙個元素的子元素都浮動起來，那麼他的父元素的高度自動坍塌到...
CSS定位，浮動
css設定透明的方法 第一種 opacity 設定透明度，當 opacity屬性值為1的時候，不透明，當它為0的時候，背景字型全部都透明，設定範圍0 1 透明度逐漸降低。第二種 rgba 0,0,0，透明度 用rgba設定背景時，只能設定背景透明，字型不能跟著透明 css清楚浮動的方法 知道父級具體...