css定位機制ⅱ——浮動定位
float屬性：進行浮動定位 left，right
clear屬性：清除浮動 left，right，both
㈠ float屬性
1.概述
⑴div實現橫向多列布局
⑵float屬性
left——左浮動 right——右浮動 none——不浮動
下圖為**的實現：
㈡ float屬性用途
⑴在**混排的時候
如果你希望位於文字的左側或者右側，那我們就把這個設定成float的屬性是left或right。
如下圖所示：
⑵在做多列布局的時候
比如說我們要分成兩列，左側盒子用div標籤表示出來，向左浮動，右側盒子用div標籤表示出來，向右浮動，這樣就可以完成兩列的乙個布局。不僅這一種方法，也可以讓兩個都向左浮動或兩個都向右浮動。
如下圖所示：
⑶三列布局：三個都向右浮動，如下圖所示：
㈢float屬性特點
用三個用div標籤做出來的盒子為例
⑴預設情況下不浮動，它們體現出了block型別元素的特點，每個獨佔一行
⑵設定浮動：第乙個盒子box1向右浮動，它已經脫離了文件流，它原來的位置就被box2佔據，box3向上移動。
特徵：
設定浮動之後，原有的位置已經失去了，其他的元素會佔據這個空白的位置
第乙個和第二個效果如下圖所示：
⑶三個盒子都向左浮動寬度又夠用的情況
div標籤形成的盒子就可以水平的排列，如下圖所示：
⑷所有的三個盒子向左浮動寬度又不夠用的情況
①box3下降
box1，box2佔據了第一行，box3會跳轉到第二行來進行顯示，即寬度不夠，box3會出現下降。
②box3下降被box1卡住了
box1比較高，box2比較矮，此時box3卡在這個空位的位置，box1又佔據了這個位置，box3就卡在這了，如下圖所示：
㈣clear屬性
⑴both，清除左右兩側的浮動
⑵left和right只能清除乙個方向的浮動
⑶none是預設值，只在需要移除已指定的清除值時用到
㈤clear屬性的用法
⑴單方向清除浮動的用法
當前做**混排，兩個出現在文字的右側，可以做兩個的右側浮動，水平排列沒有問題，垂直排列如何做？
第乙個浮動元素位置不變，第二個浮動元素為了換一行來顯示設定clear屬性為right，這樣就可以清除右側的浮動。
清除的含義並不是把第乙個浮動元素給去除掉，而是它的右側不會有浮動元素，意味著第二個浮動元素要另起一行來顯示了。
具體實現效果如下圖所示：
⑵雙側清除浮動
側欄向右浮動，並且短於主內容區域。頁尾（footer）於是按浮動所要求的向上跳到了可能的空間。
如果想讓footer單獨佔據一行，應該如何實現？
將footer這一部分設定為clear屬性，清除兩側浮動，這樣就可以做到footer的兩側不允許出現向左浮動或者向右浮動的元素，所以footer會單獨佔據一行，不跟前兩個元素排列在一起
具體實現效果如下圖所示：
希望有所幫助。
css浮動定位
請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣 如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。在 css 中，我們通過 float 屬性實現元素的浮動。浮動框旁邊的行框被縮短，從而給浮動框留出空間...
CSS浮動定位
left 左浮動，左邊沒有任何元素 right 右浮動，右邊沒有任何元素 none 不浮動 清空左右的浮動元素 both 清除左右兩邊的浮動 left和right 只清除乙個方向的浮動 none是預設值 只在需要移除一直盯的清除值時用到 如果乙個元素的子元素都浮動起來，那麼他的父元素的高度自動坍塌到...
CSS定位，浮動
css設定透明的方法 第一種 opacity 設定透明度，當 opacity屬性值為1的時候，不透明，當它為0的時候，背景字型全部都透明，設定範圍0 1 透明度逐漸降低。第二種 rgba 0,0,0，透明度 用rgba設定背景時，只能設定背景透明，字型不能跟著透明 css清楚浮動的方法 知道父級具體...