float屬性設定：
1，left–元素向左浮動
2，right–元素向右浮動
3，none–預設值。元素不浮動。
總結：
給誰新增了float，就將誰脫標，後面的內容會頂上來顯示。
如果頂上去以後，脫標的內容沒有改變位置，就會出現後者被前者（拖標內容）覆蓋的情況。
如果沒有改變位置，就出現該在的地方。
1，float的崩潰
當父元素沒有設定高度的情況下，將子元素設定為浮動（float）父一級的塊級元素高度
發生破壞（又稱為破壞，崩塌）
div–>在沒有設定高度和寬度的情況下：
高度為：div內內容的高度
寬度：為父一級的寬度
2，float的包裹性
包裹性：當div設定浮動後 寬度會自適應其內容的寬度。
塊級元素預設寬度就是父級元素的寬度，div設定為float 產生包裹特性
行級元素都會出現塊級元素包裹多出（基準線）
解決：
1）將img轉換為塊級元素 vertical-align:bottom
2）垂直對齊方式：底部對齊；行級元素轉塊級元素
3，使用float進行**混排float的設計初衷–>實現**混排（環繞方式），文字和矩形區域，能夠進行環繞排列
隨著技術進入–>例如用於商品列表併排顯示
包裹性：當div設定浮動後 寬度會自適應其內容的寬度。
塊級元素預設寬度就是父級元素的寬度，div設定為float 產生包裹特性
行級元素都會出現塊級元素包裹多出（基準線）
解決：1）將img轉換為塊級元素 vertical-align
:botom
2）垂直對齊方式：底部對齊；行級元素轉塊級元素
包裹性：當div設定浮動後 寬度會自適應其內容的寬度。
塊級元素預設寬度就是父級元素的寬度，div設定為float 產生包裹特性
行級元素都會出現塊級元素包裹多出（基準線）
解決：1）將img轉換為塊級元素 vertical-align
:botom
2）垂直對齊方式：底部對齊；行級元素轉塊級元素
1，為了父元素不會出現「高度崩塌」
2，如果強制規定了外層容器的尺寸，則顯得就不那麼靈活了，高度就就不能自動適應了
（以後的資料，大多都是從後台獲取的，這樣內容的多少和版本就會不一致）
3，從某個元素開始我們不再需要浮動效果了。
方法一：
清除浮動**–>clear: both（right and left）;–>表示清除元素之前的浮動，如果本元素之後還有浮動，是不受這段清除浮動**的影響的。
clear: left–>清除左浮動
clear：right–>清除右浮動
方法二：
額外新增乙個清除浮動的div,防止清除div的**
#cleardiv
上邊距–>top: 10px; position: relative;(設定邊距時注意定位)
方法三：（目前一些大型**流行的方法，當**內容很多時，可以防止出現乙個些意料外的問題）
：：after–>偽元素
#cleardiv：：after
專門針對ie瀏覽器清除浮動的方法：
浮動屬性（float
1.浮動是一種脫離標準文件流的形式。作用 浮動就是用來製作多個盒子併排顯示，也能設定寬高，負責網頁排版 1 float left 左浮動 2 float right 右浮動 3 float none 不浮動 浮動的元素，會自動貼著父元素盒子的邊。左浮動 貼左邊 右浮動 貼右邊 重點 瀏覽器認為浮動的...
二十九 CSS之浮動float
css定位機制 1.普通流 標準流 2.浮動 3.絕對定位 一 普通流 預設狀態，元素自動從左往右或者從上往下 塊元素 1.獨佔一行 2.可以設定寬 高 3.如果不設定寬，預設為容器的100 4.常見的塊級元素標籤 div p h1 h6 ul ol li dl dt dd 行內元素 1.與其他元素...
CSS浮動屬性Float詳解
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...