Head First HTML與CSS
第十一章 布局與定位
CSS——掌控頁面的表現(xiàn)
流（Flow）
流實際上是瀏覽器在頁面上擺放HTML元素所用的方法迅栅。瀏覽器從HTML文件最上面開始摩泪，從上到下沿著元素流逐個顯示所遇到的各個元素略荡。
它會在每個塊元素之間加一個換行芍殖，所以首先會顯示文檔中的第一個元素，然后是一個換行镣隶，然后是第二個元素隙笆，繼續(xù)換行，從文件最上面到文件末尾逐個顯示屋讶。這就是流冰寻。
內(nèi)聯(lián)元素在塊元素內(nèi)部，水平方向上會相互挨著皿渗，總體上會從左上方流向右下方斩芭。內(nèi)容會從左向右流，直到?jīng)]有更多空間乐疆，換到下一行划乖。
當瀏覽器并排放置兩個內(nèi)聯(lián)元素時，二者的外邊距會相加挤土，間距為外邊距之和琴庵。
當瀏覽器上下放置兩個塊元素時，二者的外邊距會折疊（即大的覆蓋小的）仰美，間距為二者中較大的外邊距迷殿。如果一個元素嵌套在另一個元素中，二者的外邊距也會折疊咖杂，如果外層元素有邊框則不會折疊庆寺。
內(nèi)聯(lián)元素也可以有外邊距，但通常不設(shè)置诉字。圖像例外懦尝。
瀏覽器會確定一行能流入多少文本，然后把這部分文本當作一個內(nèi)聯(lián)元素壤圃。其余文本流到下一行陵霉。
float屬性
float屬性有兩個值：right和left。
float屬性首先盡可能地向左或向右（根據(jù)float的值）浮動一個元素伍绳。然后它下面的所有內(nèi)容會繞流這個元素踊挠。
先將#elixirs div元素移到頁面開始的圖片下，然后增加float屬性：
float:right;
效果如下：
如何浮動元素
對于所有要浮動的元素都有一個要求：它必須有一個寬度冲杀。因此沒有寬度的元素應(yīng)當設(shè)置width屬性效床。
原理流程如下：首先，瀏覽器從上往下將元素流入頁面漠趁，遇到浮動段落時扁凛，將其放在最右（）左側(cè)，并從正常流動中刪除闯传，就好像浮在頁面上一樣谨朝。由于該段落已經(jīng)從正常流動中刪除，因此其他塊元素會在其側(cè)面填充甥绿，考慮該浮動段落的周界字币，圍繞著浮動元素分布。
Head first HTML與CSS 483/710
欠賬3
