深刻理解CSS浮動

前面的話

　　浮動最先的使用是出自<img src="#" align="right">，用於文本環繞圖片的排版處理。現在浮動做爲CSS中經常使用的佈局方式，本文將就浮動內容作詳細介紹和梳理

 

定義

float 浮動　

　　浮動元素脫離普通流，而後按照指定方向，向左或者向右移動，碰到父級邊界或者另一個浮動元素中止

　　值: left | right | none | inherit

　　初始值: none

　　應用於: 全部元素

　　繼承性: 無

 

特性

　　【1】浮動流

　　正常流中元素一個接一個排列；浮動元素也構成浮動流

　　【2】塊級框

　　浮動元素自身會生成一個塊級框，而不論這個元素自己是什麼，使浮動元素周圍的外邊距不會合並

　　【3】包裹性

　　浮動元素的包含塊是指其最近的塊級祖先元素，後代浮動元素不該該超出包含塊的上、左、右邊界。若不設置包含塊的高度，包含塊若浮動，則包含塊會延伸，進而包含其全部後代浮動元素；若不設置包含塊的寬度，包含塊若浮動，則包含塊寬度由後代浮動元素撐開

　　【4】破壞性

　　浮動元素脫離正常流，並破壞了自身的行框屬性，使其包含塊元素的高度塌陷，使浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框從新排列

表現

　　[1]浮動元素的左(或右)外邊界必須是源文檔中以前出現的左浮動(或右浮動)元素的右(左)外邊界。除非後出現浮動元素的頂端在先出現浮動元素的底端下面

　　[2]左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。右浮動元素的左外邊界也不會在其左邊任何左浮動元素的右外邊界的左邊

　　[3]左(或右)浮動元素左邊(右邊)有另外一個浮動元素，前者右外邊界不能在其包含塊右(左)邊界的右邊(左邊)

　　[4]浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界

　　[5]一個浮動元素的頂端不能比其父元素的內頂端更高。若是一個浮動元素在兩個合併外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素

　　[6]浮動元素的頂端不能比以前全部浮動元素或塊級元素的頂端更高

　　[7]若是源文檔中一個浮動元素以前出現另外一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端要高

　　[8]浮動元素必須儘量高地放置

　　[9]左浮動元素必須向左儘量遠，右浮動元素則必須向右儘量遠。位置越高，就會向右或向左浮動得越遠

重疊

　　浮動元素超出父元素邊界的方法有兩種：一種是浮動元素的寬度大於父元素的寬度，另外一種就是設置負外邊距。若是浮動元素存在負外邊距，且浮動元素與正常流元素重疊

　　【1】行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示

　　【2】塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內容在浮動元素之上顯示