css中的浮動

「浮動元素的定位仍是基於正常的文檔流，而後從文檔流中抽出並儘量遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其餘元素將忽略該元素並填補他原先的空間。」  

　　「元素浮動後將自動轉爲塊級元素。該元素能夠被移動至當前行的左側或右側。屬性以下：float: left, float: right or float: none」 

　　「你應該爲全部的浮動元素設定寬度屬性（除非是＜img＞元素，因其具備隱含的寬度）。若是不設定寬度，結果將是不可預知的。」 

　　「舉例來講，浮動元素應該定義寬度屬性，不管是顯式指定的仍是隱含的。另外，它會盡量的水平的填充容器元素，就像非浮動內容那樣，不給其餘內容空間以圍繞它們。其次，和正常文檔流中的元素不一樣，浮動元素的垂直邊距(margin)不會疊加。最後，浮動元素能夠和臨近在正常文檔流中塊級元素重疊（譯註：浮動元素不佔任何正常文檔流空間，因此建議不要理解成重疊，而是騰空浮動的概念。）。」 

　　「首先咱們要牢記的一件事情是，浮動元素只能浮動至左側或者右側，沒有浮動至中間一說，這是不少新手容易範的錯誤。記住，最基本的規則，浮動元素只能浮動至兩側。」  

　　「當咱們讓一個元素浮動，它會往右或者往左浮動直至遇到容器的邊緣。若是咱們向同一方向再浮動一個元素，它會浮動直至碰到前一個浮動元素的邊緣。若是咱們浮動更多的元素，他們將一個挨一個排列，但不久就會空間不足，當該行已經沒法容納更多的浮動元素，則下一個浮動元素會換行繼續排列。」   

　　Containing blocks or containing boxes：「容器元素是指包含其餘子元素的行級或塊級元素。。。。」 　 

　　「當明確指定時，浮動元素垂直位置由它原先在文檔流中的位置決定，頂端與當前行頂端對其。可是水平方向上，它儘量遠的向容器元素邊緣移動，可是仍遵循容器元素的填充距離(padding)。同行的行內元素則圍繞浮動元素排列。」  

　　「因爲浮動元素不佔據正常文檔流空間，因此浮動元素先後那些未明確指定位置的塊級元素會佔據浮動元素原本應該處在的位置，就好像它歷來未曾存在過。而浮動元素以後的那行會根據浮動元素縮小寬度。浮動元素以前的元素則會從新被排列，佔據獨立的一行。（譯註：ie 和 ff 在這種狀況下的表現不盡相同）」  

　　「若是當前行的水平方向上沒有足夠的空間容納浮動元素，則向下一行，直至有能容納該元素的行。」  

　　「任何浮動元素都不可能超過原來所處文檔留位置的上邊界。浮動元素的頂端一定和當前行頂端對齊（或者在沒有當前行元素時和前一個塊級元素底部邊緣對齊）。」 

　　「想要真正理解浮動理論，你必須明白在CSS中什麼是行 (line box)。不幸的是，爲了解釋什麼是行，你必須先明白什麼是行級元素。行級元素指的是那些非塊級元素，例如＜em＞而行是一個邏輯上的概念，是一個虛擬的矩形，包含了組成該行的全部行級元素，其高度至少等於這些行級元素中最高的那個。」  

　　「若是咱們將Div中全部的列都加上 float: left 它們會挨個向左排列，若是咱們但願在頁面底部有一個頁腳，並不須要一個最長的列，只要加上 clear: both 就能夠了」 

　　「使用浮動元素包含浮動元素這樣的佈局方式有一個潛在的缺點，即你的頁面是否可以一直保持一致的展示效果將取決於瀏覽器的實現是否保持一致。特別是當浮動元素是一個更爲複雜的佈局中的一部分的話，將變得更加不堪一擊。」