CSS六：浮動

標籤：idt   hid   lock   設定   溢出   hidden   one   for   rom   

一、float屬性
取值：
left：左浮動
right：右浮動
none：不浮動

二、浮動的作用
塊元素同行排列顯示，一般用於排版、分欄顯示。
設定浮動屬性後，脫離文檔流向指定的左或右邊對齊，直到父元素的邊界或浮動的元素。
注意：
使用浮動後要及時清除，避免影響其後的網頁元素。

三、清除浮動的必要性
浮動後，脫離了文檔流不佔網頁空間。
浮動後的網頁元素會影響同級元素。
使用clear屬性清除浮動
clear屬性取值：
left：清除左浮動。
right：清除右浮動。
both：同時清除左、右浮動。
none：不清除浮動。
清除浮動表明容器框的哪邊不挨著浮動框。

四、清除浮動的方法
幾個並列的盒子同時添加浮動，它們的父級盒子會出現以下幾種情況：
1、背景不能顯示。
2、邊框不能撐開。
如何清除浮動：
方法一：添加新的元素，應用clear:both;
方法二：父級添加overflow:auto;zoom:1;
//zoom:1;是在處理瀏覽器的相容性問題。
方法三：:after方法
注意：方法三要作用於浮動元素的父級。
例如：
/*==for IE6/7 Maxthon2==*/
#box{zoom:1;}
/*==for FF/chrome/opera/IE8==*/
#box:after{
           clear:both;
    content:‘.‘;
    display:block;
    width:0px;
    height:0px;
    visibility:hidden;
}

五、overflow屬性
1、作用
定義溢出元素內容區的內容會如何處理。
2、取值
visible：預設。
auto：自動超出部分有捲軸。
hidden：多餘的隱藏。
scroll

 

CSS六：浮動